:root {
  color-scheme: dark;
  --page: #100c20;
  --surface: #1b1530;
  --surface-raised: #241b3a;
  --ink: #f7f2fb;
  --muted: #b7adbf;
  --soft: #91879c;
  --line: rgba(226, 208, 250, .14);
  --orange: #ffad63;
  --orange-deep: #eb742b;
  --lavender: #d6c2f2;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  margin: 0;
  background:
    radial-gradient(ellipse at 80% 3%, rgba(105, 62, 131, .19), transparent 34rem),
    radial-gradient(ellipse at 4% 40%, rgba(143, 71, 82, .09), transparent 30rem),
    var(--page);
  color: var(--ink);
  font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--orange); text-underline-offset: 3px; }
a:hover { color: #ffc990; }
a:focus-visible, button:focus-visible { outline: 3px solid rgba(255, 173, 99, .72); outline-offset: 3px; }
button { font: inherit; }
.skip-link { position: absolute; top: -100px; left: 14px; z-index: 9; padding: 10px 14px; border-radius: 9px; background: var(--ink); color: var(--page); }
.skip-link:focus { top: 12px; }

.guide-nav {
  width: min(100% - 40px, 1120px);
  min-height: 74px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.guide-brand { color: var(--ink); font-size: 14px; font-weight: 850; letter-spacing: .3px; text-decoration: none; white-space: nowrap; }
.guide-brand span { margin-right: 7px; font-size: 21px; }
.guide-nav-links { display: flex; align-items: center; gap: 22px; }
.guide-nav-links a { color: #c1b8cb; font-size: 11px; font-weight: 650; text-decoration: none; white-space: nowrap; }
.guide-nav-links a:hover { color: white; }
.guide-nav-cta, .guide-button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 0 16px; border: 1px solid transparent; border-radius: 13px; background: linear-gradient(135deg,#ff9e4d,#e86e28); box-shadow: 0 8px 22px rgba(235,104,34,.15), inset 0 1px rgba(255,255,255,.22); color: #fff9f2; font-size: 11px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.guide-nav-cta:hover, .guide-button:hover { color: #fff; filter: brightness(1.06); transform: translateY(-1px); }
.guide-button-secondary { background: rgba(151,123,198,.12); border-color: rgba(201,178,244,.2); box-shadow: none; color: #f3eaff; }

.guide-main { width: min(100% - 40px, 940px); margin: 0 auto; padding: 30px 0 62px; }
.guide-main--wide { width: min(100% - 40px, 1120px); }
.breadcrumbs { margin: 0 0 24px; color: var(--soft); font-size: 10px; }
.breadcrumbs a { color: #b6a8c7; text-decoration: none; }
.breadcrumbs span { margin: 0 7px; color: #665b76; }
.article-header { max-width: 760px; padding: 18px 0 29px; }
.eyebrow { margin: 0 0 12px; color: #eaaa70; font-size: 9px; font-weight: 850; letter-spacing: 1.6px; text-transform: uppercase; }
h1, h2, h3 { text-wrap: balance; }
h1 { max-width: 760px; margin: 0; color: #faf6ff; font-size: clamp(36px, 6.5vw, 66px); line-height: 1.03; letter-spacing: -2.8px; }
h1 em { color: var(--orange); font-style: normal; }
.article-deck { max-width: 680px; margin: 19px 0 0; color: #c5bbd0; font-size: clamp(14px, 1.9vw, 17px); line-height: 1.7; }
.article-meta { margin-top: 16px; color: #837990; font-size: 10px; }
.article-meta span + span::before { margin: 0 8px; color: #5a5068; content: "·"; }
.article-visual { min-height: 220px; display: flex; align-items: flex-end; overflow: hidden; margin: 0 0 30px; padding: 20px; border: 1px solid var(--line); border-radius: 25px; background: radial-gradient(circle at 76% 22%, rgba(255,193,123,.32), transparent 13%), radial-gradient(ellipse at 70% 60%, rgba(146,87,165,.47), transparent 43%), linear-gradient(140deg,#231a38,#402b4a 58%,#25172f); }
.article-visual--photo { position: relative; aspect-ratio: 1.85 / 1; min-height: 0; isolation: isolate; background: #251a2e; }
.article-visual--photo::after { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg,rgba(14,10,22,.56),rgba(14,10,22,.05) 74%),linear-gradient(0deg,rgba(14,10,22,.42),transparent 55%); content: ""; }
.article-visual--photo img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.article-visual--photo .article-visual-label { position: relative; z-index: 1; }
.article-visual--moon { min-height: 185px; background: radial-gradient(circle at 82% 22%,#f4d7a4 0 34px,transparent 35px), radial-gradient(ellipse at 67% 91%,#28223b 0 31%,transparent 32%), linear-gradient(145deg,#251831,#493259 54%,#1c152b); }
.article-visual--movie { min-height: 190px; background: radial-gradient(circle at 50% 15%,rgba(255,169,89,.23),transparent 24%), linear-gradient(135deg,#151323,#37203d 55%,#1d172e); }
.article-visual--decor { min-height: 190px; background: radial-gradient(circle at 23% 76%,rgba(255,165,78,.38),transparent 18%), radial-gradient(circle at 76% 59%,rgba(124,102,159,.38),transparent 29%), linear-gradient(145deg,#211730,#392541 55%,#171529); }
.article-visual-label { display: flex; align-items: center; gap: 9px; padding: 10px 13px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; background: rgba(18,13,28,.58); color: #f3e8fc; font-size: 8px; font-weight: 850; letter-spacing: 1.1px; backdrop-filter: blur(10px); }
.article-visual-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 10px rgba(255,173,99,.8); }

.article-body { max-width: 760px; color: #d0c7d8; font-size: 14px; line-height: 1.82; }
.article-body p { margin: 0 0 17px; }
.article-body h2 { margin: 37px 0 12px; color: #f8f3fb; font-size: clamp(22px,3vw,29px); line-height: 1.2; letter-spacing: -.65px; }
.article-body h3 { margin: 23px 0 7px; color: #efe7f5; font-size: 16px; line-height: 1.35; }
.article-body ul, .article-body ol { margin: 8px 0 20px; padding-left: 22px; }
.article-body li { margin: 7px 0; padding-left: 3px; }
.article-body strong { color: #fff2e4; }
.article-summary { margin-bottom: 24px !important; padding: 18px 20px; border-left: 3px solid var(--orange); border-radius: 0 15px 15px 0; background: rgba(255,173,99,.07); color: #efe6f2; font-size: 15px; line-height: 1.7; }
.shopping-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 16px 0; }
.shopping-toolbar p { margin: 0; color: #e9bf9b; font-size: 11px; font-weight: 750; }
.shopping-actions { display: flex; gap: 8px; }
.shopping-actions button { min-height: 38px; padding: 0 12px; border: 1px solid rgba(226,208,250,.17); border-radius: 10px; background: rgba(255,255,255,.04); color: #e9dfef; cursor: pointer; font-size: 10px; font-weight: 750; }
.shopping-actions button:hover { border-color: rgba(255,173,99,.45); }
.shopping-category { min-width: 0; margin: 13px 0; padding: 15px 17px 12px; border: 1px solid rgba(226,208,250,.13); border-radius: 15px; background: rgba(31,24,49,.62); }
.shopping-category legend { padding: 0 7px; color: #fff0df; font-size: 14px; font-weight: 800; }
.shopping-item { display: flex; align-items: flex-start; gap: 10px; margin: 10px 0; color: #d0c7d8; font-size: 12px; line-height: 1.6; cursor: pointer; }
.shopping-item input { flex: 0 0 auto; width: 17px; height: 17px; margin: 1px 0 0; accent-color: #ffad63; }
.shopping-item input:checked + span { color: #91879c; text-decoration: line-through; }
.guide-note { margin: 22px 0; padding: 15px 17px; border: 1px solid rgba(214,194,242,.13); border-radius: 15px; background: rgba(214,194,242,.055); color: #c8bfd1; font-size: 12px; line-height: 1.7; }
.guide-note strong { color: #fff0df; }
.idea-list { display: grid; gap: 10px; margin: 16px 0 23px; }
.idea-card { padding: 15px 17px; border: 1px solid rgba(226,208,250,.12); border-radius: 15px; background: rgba(31,24,49,.7); }
.idea-card h3 { margin: 0 0 5px; }
.idea-card p { margin: 0; color: #aca1b7; font-size: 12px; line-height: 1.65; }
.mood-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 11px; margin: 17px 0 24px; }
.mood-card { padding: 17px; border: 1px solid rgba(226,208,250,.12); border-radius: 16px; background: linear-gradient(145deg,rgba(40,31,60,.8),rgba(27,21,43,.8)); }
.mood-card h3 { margin: 0 0 6px; color: #fff1e2; }
.mood-card p { margin: 0; color: #afa4ba; font-size: 12px; line-height: 1.65; }
.mood-card ul { margin-bottom: 0; font-size: 12px; }
.source-list { margin: 24px 0 0; padding: 17px 19px; border-top: 1px solid var(--line); color: #9e93aa; font-size: 11px; line-height: 1.7; }
.source-list h2 { margin: 0 0 7px; color: #d9cce5; font-size: 13px; letter-spacing: 0; }
.source-list ul { margin: 0; padding-left: 17px; }
.source-list a { color: #c1a5e4; }
.article-links { display: flex; flex-wrap: wrap; gap: 9px; margin: 27px 0 0; }
.article-links a { padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; color: #d2c3e3; font-size: 10px; text-decoration: none; }
.article-links a:hover { border-color: rgba(255,173,99,.45); color: white; }

.guide-hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(310px,.92fr); align-items: center; gap: 42px; padding: 48px 0 58px; }
.guide-hero-copy h1 { font-size: clamp(42px,6vw,68px); }
.guide-hero-copy p:not(.eyebrow) { max-width: 570px; color: #beb4c9; font-size: 15px; line-height: 1.75; }
.guide-hero-art { position: relative; min-height: 350px; display: flex; align-items: flex-end; overflow: hidden; margin: 0; padding: 20px; border: 1px solid var(--line); border-radius: 27px; background: radial-gradient(circle at 76% 23%,#f5d9aa 0 38px,transparent 39px), radial-gradient(ellipse at 50% 100%,#262036 0 38%,transparent 39%), linear-gradient(145deg,#291934,#54385d 56%,#1c162b); box-shadow: 0 25px 70px rgba(0,0,0,.25); }
.guide-hero-art::before { position: absolute; right: 18%; bottom: 17%; left: 22%; height: 46%; content: ""; border: 1px solid rgba(255,196,120,.25); border-radius: 50% 50% 5px 5px; background: linear-gradient(145deg,#39244a,#1d1930 70%); box-shadow: 0 0 60px rgba(255,148,63,.12); }
.guide-hero-art::after { position: absolute; right: 42%; bottom: 17%; width: 15%; height: 21%; content: ""; border-radius: 50% 50% 0 0; background: linear-gradient(180deg,#ffd285,#eb702e 70%,#432b42 71%); box-shadow: 0 0 28px rgba(255,161,66,.35); }
.guide-hero-art figcaption { position: relative; z-index: 1; color: #f1e5f3; font-size: 9px; font-weight: 800; letter-spacing: 1.2px; }
.guide-intro { max-width: 720px; margin: 0 auto 20px; color: #bcb2c8; font-size: 14px; line-height: 1.75; }
.guide-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.guide-card { min-height: 200px; display: flex; flex-direction: column; padding: 20px; border: 1px solid rgba(226,208,250,.12); border-radius: 19px; background: linear-gradient(145deg,rgba(40,31,60,.82),rgba(25,20,42,.9)); text-decoration: none; transition: transform .18s ease,border-color .18s ease; }
.guide-card--with-image { min-height: 0; overflow: hidden; padding: 0 0 18px; }
.guide-card-media { position: relative; display: block; width: 100%; aspect-ratio: 1.9 / 1; overflow: hidden; background: var(--surface-raised); }
.guide-card-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.guide-card--with-image .guide-card-kicker, .guide-card--with-image h2, .guide-card--with-image p, .guide-card--with-image span:last-child { margin-right: 18px; margin-left: 18px; }
.guide-card--with-image .guide-card-kicker { margin-top: 16px; }
.guide-card--with-image h2 { margin-top: 8px; }
.guide-card--with-image span:last-child { padding-top: 14px; }
.guide-card:hover { transform: translateY(-2px); border-color: rgba(255,173,99,.37); }
.guide-card-kicker { color: #e5a66f; font-size: 8px; font-weight: 850; letter-spacing: 1.4px; text-transform: uppercase; }
.guide-card h2 { margin: 11px 0 7px; color: #f8f2fc; font-size: 19px; letter-spacing: -.5px; }
.guide-card p { margin: 0; color: #a89db4; font-size: 12px; line-height: 1.65; }
.guide-card span:last-child { margin-top: auto; padding-top: 17px; color: #ffb476; font-size: 10px; font-weight: 800; }
.guide-card--accent { background: radial-gradient(ellipse at 85% 12%,rgba(246,169,87,.16),transparent 45%),linear-gradient(145deg,rgba(58,39,62,.9),rgba(27,21,43,.9)); }
.shopping-demand { margin: 22px 0 27px; padding: clamp(17px,3vw,24px); border: 1px solid rgba(214,194,242,.15); border-radius: 20px; background: radial-gradient(ellipse at 100% 0%,rgba(255,173,99,.12),transparent 48%),linear-gradient(145deg,rgba(40,31,60,.82),rgba(25,20,42,.9)); }
.shopping-demand-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.shopping-demand-header h2 { margin: 0; color: #f8f3fb; font-size: clamp(17px,2.6vw,22px); letter-spacing: -.5px; }
.shopping-demand-header p { margin: 0; color: #c8a987; font-size: 9px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.shopping-stat-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; }
.shopping-stat { min-width: 0; padding: 13px 12px; border: 1px solid rgba(226,208,250,.12); border-radius: 14px; background: rgba(13,10,23,.3); }
.shopping-stat strong { display: block; color: #fff0df; font-size: clamp(23px,4vw,34px); line-height: 1; letter-spacing: -1.5px; font-variant-numeric: tabular-nums; }
.shopping-stat span { display: block; margin-top: 7px; color: #b8acbf; font-size: 10px; line-height: 1.45; }
.shopping-demand-note { margin: 12px 0 0 !important; color: #998da5; font-size: 10px; line-height: 1.6; }
.shopping-jump-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; margin: 18px 0 24px; }
.shopping-jump-card { min-width: 0; min-height: 116px; display: flex; flex-direction: column; padding: 13px; border: 1px solid rgba(226,208,250,.12); border-radius: 15px; background: linear-gradient(145deg,rgba(40,31,60,.8),rgba(25,20,42,.85)); color: #d9cce5; text-decoration: none; transition: transform .18s ease,border-color .18s ease; }
.shopping-jump-card:hover { transform: translateY(-2px); border-color: rgba(255,173,99,.4); color: #fff; }
.shopping-jump-icon { margin-bottom: 9px; font-size: 20px; line-height: 1; }
.shopping-jump-card strong { color: #fff0df; font-size: 11px; }
.shopping-jump-card small { margin-top: 4px; color: #9d92a9; font-size: 9px; line-height: 1.45; }
.costume-snapshot { margin-top: 18px; }
.costume-snapshot.mood-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
.costume-snapshot .mood-card { min-height: 206px; }
.costume-snapshot .mood-card > p { margin: 0 0 8px; color: #d9a879; font-size: 8px; font-weight: 850; letter-spacing: 1.3px; text-transform: uppercase; }
.costume-snapshot .mood-card h3 { margin-bottom: 8px; }
.costume-snapshot .mood-card li { margin: 4px 0; }
.costume-snapshot .mood-card > .shopping-demand-note { margin-top: 10px; color: #a99eb4; font-size: 10px; font-weight: 500; letter-spacing: 0; line-height: 1.55; text-transform: none; }
.guide-footer { width: min(100% - 40px, 1120px); margin: 0 auto; padding: 19px 0 26px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid rgba(255,255,255,.07); color: #81778c; font-size: 10px; }
.guide-footer nav { display: flex; flex-wrap: wrap; gap: 15px; }
.guide-footer a { color: #9e94a9; text-decoration: none; }

.countdown-panel { margin: 4px 0 25px; padding: clamp(20px,4vw,34px); border: 1px solid rgba(255,188,117,.22); border-radius: 24px; background: radial-gradient(ellipse at 80% 0%,rgba(255,166,93,.16),transparent 42%),linear-gradient(145deg,#251b38,#1a152b); box-shadow: 0 22px 64px rgba(0,0,0,.2); text-align: center; }
.countdown-panel > p { margin: 0 0 18px; color: #e9bf9b; font-size: 10px; font-weight: 850; letter-spacing: 1.7px; text-transform: uppercase; }
.countdown-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; }
.countdown-unit { min-width: 0; padding: 14px 8px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: rgba(13,10,23,.36); }
.countdown-unit strong { display: block; color: #fff8ee; font-variant-numeric: tabular-nums; font-size: clamp(30px,7vw,58px); line-height: 1; letter-spacing: -2px; }
.countdown-unit span { display: block; margin-top: 7px; color: #a69aaf; font-size: 8px; font-weight: 850; letter-spacing: 1.2px; text-transform: uppercase; }
.countdown-status { min-height: 20px; margin: 17px 0 0 !important; color: #d7c6e6 !important; font-size: 12px !important; line-height: 1.55; }
.countdown-share { min-height: 39px; margin-top: 14px; padding: 0 14px; border: 1px solid rgba(255,255,255,.15); border-radius: 12px; background: rgba(255,255,255,.04); color: #e9dfef; cursor: pointer; font-size: 10px; font-weight: 750; }
.countdown-share:hover { border-color: rgba(255,173,99,.45); }
.article-cta { margin: 32px 0 0; padding: 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border: 1px solid rgba(255,178,100,.18); border-radius: 19px; background: radial-gradient(ellipse at 88% 50%,rgba(175,91,63,.14),transparent 42%),rgba(37,28,55,.88); }
.article-cta h2 { margin: 0 0 4px; color: #f9f3fc; font-size: 19px; letter-spacing: -.4px; }
.article-cta p { margin: 0; color: #afa4ba; font-size: 11px; line-height: 1.55; }

@media (max-width: 760px) {
  .guide-nav { width: min(100% - 32px, 1120px); min-height: 63px; gap: 10px; }
  .guide-nav-links { gap: 12px; }
  .guide-nav-links a { font-size: 9px; }
  .guide-nav-links a:nth-child(2) { display: none; }
  .guide-nav-cta { min-height: 37px; padding: 0 11px; font-size: 9px; }
  .guide-main, .guide-main--wide { width: min(100% - 34px, 940px); padding-top: 22px; }
  .guide-hero { grid-template-columns: 1fr; gap: 18px; padding: 31px 0 39px; }
  .guide-hero-copy h1 { font-size: clamp(42px,12vw,62px); letter-spacing: -2px; }
  .guide-hero-copy p:not(.eyebrow) { font-size: 13px; }
  .guide-hero-art { min-height: 245px; border-radius: 21px; }
  .article-header { padding: 10px 0 23px; }
  h1 { font-size: clamp(36px,11vw,56px); letter-spacing: -1.9px; }
  .article-deck { margin-top: 14px; font-size: 13px; }
  .article-visual { min-height: 155px; margin-bottom: 24px; border-radius: 19px; }
  .article-body { font-size: 13px; line-height: 1.78; }
  .article-body h2 { margin-top: 30px; font-size: 23px; }
  .article-body h3 { font-size: 15px; }
  .article-summary { font-size: 14px; }
  .mood-list, .guide-grid { grid-template-columns: 1fr; }
  .costume-snapshot.mood-list { grid-template-columns: 1fr; }
  .shopping-stat-grid, .shopping-jump-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .shopping-demand-header { align-items: flex-start; flex-direction: column; }
  .guide-card { min-height: 174px; padding: 17px; }
  .guide-card--with-image { min-height: 0; padding: 0 0 17px; }
  .guide-card--with-image .guide-card-kicker, .guide-card--with-image h2, .guide-card--with-image p, .guide-card--with-image span:last-child { margin-right: 16px; margin-left: 16px; }
  .guide-card-media { aspect-ratio: 1.8 / 1; }
  .article-cta { align-items: stretch; flex-direction: column; padding: 18px; }
  .article-cta .guide-button { width: 100%; }
  .countdown-grid { gap: 6px; }
  .countdown-unit { padding: 13px 4px; border-radius: 12px; }
  .countdown-unit strong { font-size: clamp(24px,8vw,40px); letter-spacing: -1.5px; }
  .countdown-unit span { font-size: 7px; letter-spacing: .7px; }
  .guide-footer { width: min(100% - 34px,1120px); align-items: flex-start; flex-direction: column; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .guide-card, .guide-nav-cta, .guide-button { transition: none; }
}

@media print {
  body { background: #fff !important; color: #222 !important; }
  .guide-nav, .guide-footer, .article-visual, .article-cta, .shopping-actions, .shopping-jump-grid, .breadcrumbs { display: none !important; }
  .guide-main { width: 100% !important; padding: 0 !important; }
  .article-header, .article-body, .article-body h1, .article-body h2, .article-body h3, .article-body p, .shopping-category legend, .shopping-item { color: #222 !important; }
  .shopping-category { break-inside: avoid; border-color: #aaa; background: #fff; }
}