:root {
  --ink: #211125;
  --ink-soft: #3a2742;
  --plum: #24112e;
  --plum-2: #3c1a47;
  --cream: #f5eddd;
  --paper: #fffaf0;
  --orange: #ff5a36;
  --orange-dark: #cf3e24;
  --lime: #d7ff50;
  --line: rgba(33, 17, 37, 0.15);
  --display: "Playfair Display", Georgia, serif;
  --sans: "DM Sans", Arial, sans-serif;
  --mono: "DM Mono", monospace;
  --max: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--cream); font-family: var(--sans); }
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }
img { max-width: 100%; }
.skip-link { position: absolute; top: -60px; left: 16px; z-index: 50; padding: 10px 14px; border-radius: 6px; background: var(--lime); color: var(--ink); font-weight: 700; }
.skip-link:focus { top: 16px; }
.site-shell { overflow: hidden; }
.section-frame { width: min(var(--max), calc(100% - 48px)); margin: 0 auto; }
.site-header { width: min(var(--max), calc(100% - 48px)); min-height: 82px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; color: var(--plum); text-decoration: none; font-family: var(--display); font-size: 1.35rem; font-weight: 700; letter-spacing: -0.05em; }
.wordmark img { width: 33px; height: 33px; object-fit: contain; }
.wordmark span span { color: var(--orange); }
.header-note, .header-link { margin: 0; font: 0.68rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.header-note { color: #5e4e62; display: flex; align-items: center; gap: 8px; }
.note-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px var(--plum); }
.header-link { padding-bottom: 3px; border-bottom: 1px solid var(--ink); text-decoration: none; }
.eyebrow { margin: 0 0 16px; color: var(--orange-dark); font: 0.7rem var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }

.hero { min-height: 594px; position: relative; display: grid; grid-template-columns: 1.04fr 0.96fr; align-items: stretch; border: 1px solid var(--ink); border-radius: 2px; background: var(--paper); }
.hero::before { content: ""; position: absolute; width: 1px; height: 100%; left: 54%; background: var(--ink); opacity: 0.2; }
.hero-copy { padding: clamp(42px, 7vw, 88px) clamp(30px, 6vw, 72px); position: relative; z-index: 2; }
h1, h2, h3, p { overflow-wrap: break-word; }
h1, h2, h3 { font-family: var(--display); letter-spacing: -0.055em; line-height: 0.96; }
h1 { max-width: 650px; margin: 0; font-size: clamp(3rem, 6.5vw, 6.15rem); }
h1 em, h2 em { color: var(--orange); font-weight: 700; }
.hero-intro { max-width: 450px; margin: 26px 0 30px; font-size: 1.1rem; line-height: 1.55; color: var(--ink-soft); }
.hero-actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.button { min-height: 52px; padding: 15px 19px; border: 1px solid var(--ink); border-radius: 0; font-weight: 700; text-decoration: none; display: inline-flex; justify-content: center; align-items: center; gap: 16px; transition: transform 180ms ease, background 180ms ease, color 180ms ease; }
.button:hover { transform: translate(-3px, -3px); box-shadow: 4px 4px 0 var(--ink); }
.button-primary { background: var(--orange); color: #fff; }
.button-primary:hover { background: var(--plum); }
.text-link { border-bottom: 1px solid var(--ink); padding-bottom: 4px; font-weight: 700; text-decoration: none; }
.hero-proof { margin-top: 54px; display: flex; gap: 18px; flex-wrap: wrap; color: #6d5d70; font: 0.66rem var(--mono); letter-spacing: 0.05em; text-transform: uppercase; }
.hero-art { position: relative; min-height: 420px; background: var(--plum); overflow: hidden; }
.moon-ring { position: absolute; width: min(38vw, 450px); aspect-ratio: 1; top: 10%; left: 14%; border: 1px solid var(--lime); border-radius: 50%; opacity: 0.88; animation: drift 8s ease-in-out infinite alternate; }
.moon-ring::after { content: ""; position: absolute; width: 80%; height: 80%; top: 10%; left: 30%; border-radius: 50%; background: var(--plum); }
.mask-shape { position: absolute; width: min(36vw, 420px); aspect-ratio: 1.62; top: 40%; left: 8%; border-radius: 48% 48% 58% 58% / 66% 66% 32% 32%; background: var(--orange); transform: rotate(-8deg); box-shadow: 16px 16px 0 rgba(215, 255, 80, 0.9); }
.mask-shape::before { content: ""; position: absolute; width: 32%; height: 34%; left: 16%; top: 30%; border-radius: 50%; background: var(--plum); transform: rotate(10deg); }
.mask-shape::after { content: ""; position: absolute; width: 32%; height: 34%; right: 16%; top: 30%; border-radius: 50%; background: var(--plum); transform: rotate(-10deg); }
.mask-shape span:first-child { position: absolute; bottom: -20%; left: 46%; width: 6%; height: 48%; background: var(--orange); transform: rotate(-12deg); }
.mask-shape span:last-child { position: absolute; bottom: -27%; left: 53%; width: 5%; height: 47%; background: var(--orange); transform: rotate(13deg); }
.moon-cut { position: absolute; width: 23px; height: 23px; right: 14%; bottom: 20%; border-radius: 50%; border: 2px solid var(--lime); }
.art-label { position: absolute; margin: 0; color: var(--cream); font: 0.67rem var(--mono); line-height: 1.35; letter-spacing: 0.12em; }
.label-top { top: 10%; right: 12%; }
.label-side { right: 5%; bottom: 8%; writing-mode: vertical-rl; transform: rotate(180deg); }
.hero-sticker { position: absolute; width: 82px; height: 82px; right: 17%; top: 51%; border-radius: 50%; padding-top: 18px; background: var(--lime); color: var(--ink); text-align: center; font: 1.55rem var(--display); line-height: 0.8; transform: rotate(13deg); }
.hero-sticker small { font: 0.55rem var(--mono); letter-spacing: 0.1em; }

.deadline-strip { width: min(var(--max), calc(100% - 48px)); margin: 0 auto; padding: 34px 0 0; display: grid; grid-template-columns: 0.82fr 2.18fr; gap: 22px; align-items: end; }
.deadline-intro { padding: 0 8px 24px 0; }
.deadline-intro p:last-child { margin: 0; max-width: 220px; font: 1.22rem var(--display); line-height: 1.05; }
.deadline-paths { display: grid; grid-template-columns: repeat(3, 1fr); }
.deadline-card { min-height: 176px; padding: 20px; border: 1px solid var(--ink); border-right: 0; background: transparent; text-align: left; color: var(--ink); display: flex; flex-direction: column; transition: background 170ms ease, color 170ms ease; }
.deadline-card:last-child { border-right: 1px solid var(--ink); }
.deadline-card:hover, .deadline-card.is-active { background: var(--plum); color: var(--cream); }
.path-number { color: var(--orange); font: 0.66rem var(--mono); }
.deadline-card strong { margin: auto 0 8px; font-family: var(--display); font-size: 1.7rem; letter-spacing: -0.04em; }
.deadline-card span:last-child { font-size: 0.8rem; line-height: 1.35; }

.finder { margin-top: 86px; padding: clamp(36px, 6vw, 72px); background: var(--plum); color: var(--cream); position: relative; }
.finder::after { content: "✦"; position: absolute; right: 4%; top: 4%; color: var(--lime); font-size: 1.45rem; }
.finder .eyebrow { color: var(--lime); }
.finder-heading { max-width: 710px; }
h2 { margin: 0; font-size: clamp(2.55rem, 5vw, 4.8rem); }
.finder-heading > p:last-child { max-width: 590px; margin: 20px 0 0; color: #d6c8db; font-size: 1rem; line-height: 1.5; }
.costume-form { margin-top: 50px; }
fieldset { margin: 0; padding: 24px 0; border: 0; border-top: 1px solid rgba(245, 237, 221, 0.24); }
legend { width: 100%; padding: 0 0 17px; font-size: 0.92rem; font-weight: 700; }
legend span { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; background: var(--orange); color: #fff; font: 0.61rem var(--mono); }
.choice-grid { display: grid; gap: 8px; }
.choice-grid-three { grid-template-columns: repeat(3, 1fr); }
.choice-grid-four { grid-template-columns: repeat(4, 1fr); }
.choice-card { min-height: 68px; padding: 13px; border: 1px solid rgba(245, 237, 221, 0.38); cursor: pointer; transition: border 150ms ease, background 150ms ease, transform 150ms ease; }
.choice-card:hover { transform: translateY(-2px); border-color: var(--lime); }
.choice-card.selected { border-color: var(--lime); background: rgba(215, 255, 80, 0.12); }
.choice-card input { position: absolute; opacity: 0; pointer-events: none; }
.choice-card span { display: block; font-weight: 700; }
.choice-card small { display: block; margin-top: 5px; color: #cfbdd4; line-height: 1.25; }
.form-footer { padding-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid rgba(245, 237, 221, 0.24); }
.form-footer p { margin: 0; color: #d6c8db; font-size: 0.78rem; line-height: 1.4; }
.form-star { color: var(--lime); }
.results-panel { margin-top: 10px; padding: 30px; color: var(--ink); background: var(--paper); }
.results-topline { display: flex; justify-content: space-between; align-items: center; }
.results-panel .eyebrow { margin-bottom: 0; }
.results-reset { border: 0; border-bottom: 1px solid var(--ink); padding: 0; background: transparent; color: var(--ink); font-weight: 700; }
.results-panel h3 { margin: 25px 0 7px; font-size: clamp(2.1rem, 3.2vw, 3.45rem); }
.results-panel > p { margin: 0; color: var(--ink-soft); }
.look-results { margin-top: 26px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.result-card { min-height: 232px; padding: 18px; border: 1px solid var(--ink); display: flex; flex-direction: column; background: #fffdf7; }
.result-meta { color: var(--orange-dark); font: 0.65rem var(--mono); letter-spacing: 0.06em; text-transform: uppercase; }
.result-card h4 { margin: auto 0 10px; font-family: var(--display); font-size: 1.75rem; letter-spacing: -0.045em; line-height: 0.94; }
.result-card p { margin: 0; font-size: 0.84rem; line-height: 1.4; color: var(--ink-soft); }
.result-card .needs { margin-top: 15px; padding-top: 10px; border-top: 1px solid var(--line); font: 0.66rem var(--mono); line-height: 1.45; text-transform: uppercase; }
.no-results { grid-column: 1 / -1; padding: 24px; border: 1px dashed var(--ink); color: var(--ink-soft); }

.lookbook { margin-top: 105px; }
.lookbook-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; }
.lookbook-heading h2 { max-width: 680px; }
.lookbook-copy { max-width: 360px; margin: 0 0 5px; line-height: 1.5; color: var(--ink-soft); }
.look-rail { width: min(1440px, calc(100% - 24px)); margin: 44px auto 0; display: grid; grid-template-columns: 1.18fr 1fr 1fr 1.18fr; }
.feature-look { min-height: 385px; padding: 24px; display: flex; flex-direction: column; border: 1px solid var(--ink); border-right: 0; }
.feature-look:last-child { border-right: 1px solid var(--ink); }
.feature-look h3 { margin: auto 0 12px; font-size: clamp(2rem, 3vw, 3.3rem); }
.feature-look p { max-width: 250px; margin: 0; line-height: 1.45; }
.look-index, .look-tag { font: 0.64rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.look-tag { margin-top: 22px; }
.feature-look-dark { background: #25162f; color: var(--cream); }
.feature-look-orange { background: var(--orange); color: #fff8ed; }
.feature-look-lime { background: var(--lime); color: var(--ink); }
.feature-look-plum { background: #7c507c; color: var(--paper); }

.offers { margin-top: 110px; padding: 60px clamp(24px, 5vw, 60px); border: 1px solid var(--ink); background: var(--paper); }
.offers-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; }
.offers-heading h2 { font-size: clamp(2.5rem, 4.4vw, 4.3rem); }
.offers-heading > p:last-child { max-width: 320px; margin: 0; color: var(--ink-soft); line-height: 1.5; }
.offer-tabs { margin: 40px 0 18px; display: flex; gap: 8px; flex-wrap: wrap; }
.offer-filter { padding: 10px 13px; border: 1px solid var(--ink); background: transparent; color: var(--ink); font: 0.68rem var(--mono); letter-spacing: 0.05em; text-transform: uppercase; }
.offer-filter:hover, .offer-filter.active { background: var(--plum); color: var(--cream); }
.offer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.offer-card { min-height: 280px; padding: 20px; border: 1px solid var(--ink); background: #fffdf7; display: flex; flex-direction: column; }
.offer-status { margin-bottom: 15px; color: var(--orange-dark); font: 0.64rem var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.offer-card h3 { margin: 0; font-size: 2rem; }
.offer-retailer { margin: 8px 0 13px; color: var(--ink-soft); font-size: 0.82rem; }
.offer-price { margin: 0; font-weight: 700; font-size: 0.92rem; }
.offer-fulfillment { margin: 10px 0 20px; color: var(--ink-soft); font-size: 0.82rem; line-height: 1.4; }
.offer-link { margin-top: auto; width: fit-content; border-bottom: 1px solid var(--ink); padding-bottom: 4px; font-weight: 700; text-decoration: none; }
.offer-link:hover { color: var(--orange-dark); border-color: var(--orange-dark); }
.offer-disclaimer { margin: 18px 0 0; color: #665669; font-size: 0.76rem; line-height: 1.45; }
.offer-disclaimer span { color: var(--orange); }

.challenge { margin-top: 110px; padding: clamp(34px, 6vw, 76px); display: grid; grid-template-columns: 150px 1fr 150px; gap: 40px; align-items: center; background: var(--orange); color: #fff8ed; }
.challenge-stamp { width: 126px; aspect-ratio: 1; padding-top: 29px; border-radius: 50%; border: 2px solid var(--plum); color: var(--plum); text-align: center; font: 2.8rem var(--display); line-height: 0.65; transform: rotate(-12deg); }
.challenge-stamp small { font: 0.65rem var(--mono); letter-spacing: 0.11em; }
.challenge .eyebrow { color: var(--plum); }
.challenge h2 { max-width: 680px; font-size: clamp(2.8rem, 5.3vw, 5rem); }
.challenge h2 em { color: var(--plum); }
.challenge-copy > p:not(.eyebrow) { max-width: 690px; margin: 20px 0 0; line-height: 1.55; }
.challenge-steps { margin-top: 25px; display: flex; gap: 8px; flex-wrap: wrap; }
.challenge-steps span { padding: 8px 10px; border: 1px solid rgba(36, 17, 46, 0.6); font: 0.65rem var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }
.challenge-note { padding: 22px 0; border-top: 1px solid var(--plum); border-bottom: 1px solid var(--plum); color: var(--plum); font: 0.73rem var(--mono); letter-spacing: 0.08em; line-height: 1.5; text-align: center; }

.content-lab { margin-top: 110px; padding: 85px 0; background: #e9dfcc; }
.content-heading { display: grid; grid-template-columns: 1fr 1.05fr; gap: 25px; align-items: end; }
.content-heading .eyebrow { grid-column: 1 / -1; margin: 0; }
.content-heading h2 { font-size: clamp(2.5rem, 4.6vw, 4.6rem); }
.content-heading > p:last-child { max-width: 400px; margin: 0 0 6px; line-height: 1.5; color: var(--ink-soft); }
.video-list { margin-top: 46px; border-top: 1px solid var(--ink); }
.video-card { padding: 22px 0; display: grid; grid-template-columns: 70px 1fr auto; gap: 22px; align-items: center; border-bottom: 1px solid var(--ink); }
.video-num, .video-time { font: 0.67rem var(--mono); letter-spacing: 0.08em; }
.video-hook { margin: 0 0 8px; font-family: var(--display); font-size: 1.6rem; font-weight: 700; letter-spacing: -0.04em; }
.video-card div > p:last-child { margin: 0; color: var(--ink-soft); font-size: 0.88rem; }
.video-time { color: var(--orange-dark); }
.site-footer { width: min(var(--max), calc(100% - 48px)); min-height: 120px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.site-footer p, .site-footer > a:last-child { margin: 0; color: #615064; font-size: 0.8rem; }
.site-footer > a:last-child { border-bottom: 1px solid var(--ink); padding-bottom: 3px; color: var(--ink); font-weight: 700; text-decoration: none; }

@keyframes drift { to { transform: translateY(12px) rotate(-3deg); } }
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .hero::before { display: none; }
  .hero-art { min-height: 360px; }
  .moon-ring { width: 360px; left: 25%; }
  .mask-shape { width: 360px; left: 16%; }
  .deadline-strip { grid-template-columns: 1fr; }
  .deadline-intro { padding-bottom: 0; }
  .deadline-intro p:last-child { max-width: 400px; }
  .lookbook-heading, .offers-heading { align-items: start; flex-direction: column; }
  .look-rail { grid-template-columns: repeat(2, 1fr); }
  .feature-look:nth-child(2) { border-right: 1px solid var(--ink); }
  .feature-look:nth-child(-n + 2) { border-bottom: 0; }
  .challenge { grid-template-columns: 100px 1fr; }
  .challenge-note { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .section-frame, .site-header, .deadline-strip, .site-footer { width: min(100% - 28px, var(--max)); }
  .site-header { min-height: 66px; }
  .header-note { display: none; }
  .wordmark { font-size: 1.2rem; }
  .wordmark img { width: 29px; height: 29px; }
  .hero-copy { padding: 44px 24px 36px; }
  h1 { font-size: clamp(3.15rem, 15vw, 4.8rem); }
  .hero-proof { margin-top: 36px; }
  .hero-art { min-height: 300px; }
  .moon-ring { width: 290px; top: 3%; left: 16%; }
  .mask-shape { width: 290px; left: 8%; top: 41%; }
  .hero-sticker { width: 67px; height: 67px; padding-top: 15px; right: 12%; }
  .deadline-paths, .choice-grid-three, .choice-grid-four, .look-results, .offer-grid, .content-heading { grid-template-columns: 1fr; }
  .deadline-card { min-height: 115px; border-right: 1px solid var(--ink); border-bottom: 0; }
  .deadline-card:last-child { border-bottom: 1px solid var(--ink); }
  .deadline-card strong { margin: 12px 0 6px; }
  .finder { margin-top: 58px; padding: 34px 20px; }
  .choice-card { min-height: 52px; }
  .choice-card small { display: inline; margin-left: 6px; }
  .form-footer { align-items: stretch; flex-direction: column; }
  .results-panel { padding: 20px; }
  .lookbook { margin-top: 65px; }
  .look-rail { width: calc(100% - 28px); grid-template-columns: 1fr; }
  .feature-look, .feature-look:nth-child(2) { min-height: 280px; border-right: 1px solid var(--ink); border-bottom: 0; }
  .feature-look:last-child { border-bottom: 1px solid var(--ink); }
  .offers { margin-top: 65px; padding: 34px 20px; }
  .challenge { margin-top: 65px; grid-template-columns: 1fr; gap: 26px; }
  .challenge-stamp { width: 100px; padding-top: 24px; font-size: 2.3rem; }
  .challenge-note { grid-column: auto; text-align: left; }
  .content-lab { margin-top: 65px; padding: 60px 0; }
  .video-card { grid-template-columns: 36px 1fr; gap: 14px; }
  .video-time { grid-column: 2; }
  .site-footer { min-height: 150px; align-items: start; justify-content: center; flex-direction: column; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }