/* Daily Wonder — marketing site layout.
   Mobile-first base styles; desktop layouts under @media (min-width: 900px).
   Ports the two Claude Design source files (desktop + mobile) to standard web. */

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; }
body { background: var(--cream-1); color: var(--ink-1); }
img { max-width: 100%; }
.dw-nowrap { white-space: nowrap; }
.dw-center { text-align: center; }

/* ---------- scroll-reveal (unveiling) ---------- */
.js .dw-reveal,
.js [data-reveal-delay] { opacity: 0; transform: translateY(18px); }
.js .dw-reveal.is-revealed,
.js [data-reveal-delay].is-revealed {
  opacity: 1; transform: none;
  transition: opacity var(--duration-reveal) var(--ease-unveil),
              transform var(--duration-reveal) var(--ease-unveil);
}
/* hero container stays visible so its children can stagger in */
.js .dw-hero.dw-reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .dw-reveal, .js [data-reveal-delay] { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- shared components ---------- */
.dw-wordmark { font-family: var(--font-display); font-weight: 600; font-size: 23px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-1); }

.dw-museumlabel {
  display: inline-block; padding: 7px 22px;
  background: linear-gradient(180deg, var(--brass-hi) 0%, var(--brass-mid) 55%, var(--brass-lo) 100%);
  border: 1px solid var(--brass-lo); border-radius: var(--radius-1);
  box-shadow: var(--shadow-plaque); color: var(--brass-text);
  font-family: var(--font-body); font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; white-space: nowrap; line-height: 1.2;
}
.dw-museumlabel--sm { padding: 4px 14px; font-size: 10px; }

.dw-eyebrow { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-1); font-weight: 600; }
.dw-eyebrow--wide { letter-spacing: 0.22em; }

.dw-h1 { font-family: var(--font-display); font-weight: 600; font-size: 40px; line-height: 1.1; color: var(--ink-1); margin: 36px 0 0; text-wrap: balance; }
.dw-h2 { font-family: var(--font-display); font-weight: 600; font-size: 32px; line-height: 1.14; color: var(--ink-1); margin: 14px 0 0; text-wrap: balance; }
.dw-h2--lg { font-size: 32px; }

.dw-sectionhead { text-align: center; }
.dw-sectionhead > span { font-family: var(--font-body); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-1); font-weight: 500; }
.dw-sectionhead > i { display: block; color: var(--gold-3); font-size: 9px; line-height: 1; margin: 10px auto; font-style: normal; }

/* diamond rule + section dividers */
.dw-rule-diamond, .dw-divider { display: flex; align-items: center; justify-content: center; }
.dw-rule-diamond { gap: 14px; margin: 26px auto 0; max-width: 220px; }
.dw-rule-diamond > span { flex: 1; border-top: 1px solid var(--hairline-gold); }
.dw-rule-diamond > i { color: var(--gold-1); font-size: 11px; line-height: 1; font-style: normal; }
.dw-divider { gap: 16px; margin: 28px auto; padding: 0 40px; }
.dw-divider > span { flex: 1; border-top: 1px solid var(--gold-2); }
.dw-divider > i { color: var(--gold-1); font-size: 13px; line-height: 1; font-style: normal; }

/* store buttons — shared component (identical size / shape / behavior in hero + footer) */
.dw-stores { display: flex; flex-direction: column; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.dw-store { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 12px; width: 200px; box-sizing: border-box; padding: 9px 16px; background: var(--ink-1); border: 1px solid var(--ink-1); border-radius: 3px; cursor: pointer; box-shadow: 0 2px 6px rgba(20,16,10,0.18); transition: background 0.15s ease; }
.dw-store-icon { width: 30px; height: 30px; flex-shrink: 0; color: var(--cream-0); }
.dw-store-text { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.dw-store-name { font-family: var(--font-body); font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-0); font-weight: 500; white-space: nowrap; }
.dw-store-soon { font-family: var(--font-body); font-style: italic; font-size: 13px; color: var(--gold-3); }
@media (hover: hover) { .dw-store:hover { background: #2A2216; } }

/* ---------- mobile sticky bar ---------- */
.dw-mobilebar { position: sticky; top: 0; z-index: 50; background: var(--cream-1); border-bottom: 1px solid var(--hairline); display: flex; align-items: center; justify-content: center; height: 54px; }
.dw-mobilebar-mark { display: flex; align-items: center; gap: 9px; }
.dw-mobilebar-mark > span { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-1); }

/* ---------- 1. hero ---------- */
.dw-hero { padding: 36px 26px 40px; }
.dw-hero-inner { display: flex; flex-direction: column; }
.dw-hero-art { order: -1; text-align: center; }
.dw-hero-copy { text-align: center; }
.dw-hero-logo { display: none; }
.dw-hero-lead, .dw-lead { font-family: var(--font-body); font-size: 16.5px; line-height: 1.65; color: var(--ink-2); margin: 20px auto 0; max-width: 320px; text-wrap: pretty; }
.dw-frame-wrap { position: relative; width: 78%; margin: 0 auto; }
.dw-frame-img { width: 100%; display: block; }
.dw-hero-plaque, .dw-app-plaque { position: absolute; left: 50%; transform: translateX(-50%); bottom: 1%; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.35)); }

/* ---------- 2. philosophy ---------- */
.dw-philosophy { background: var(--cream-2); text-align: center; padding: 48px 30px; }
.dw-philosophy-inner { max-width: 920px; margin: 0 auto; }
.dw-pullquote { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 23px; line-height: 1.4; color: var(--ink-1); margin: 26px 0 0; text-wrap: balance; }
.dw-pullquote > strong { font-style: normal; font-weight: 600; }
.dw-manifesto { font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: var(--ink-2); margin: 26px auto 0; max-width: 600px; text-wrap: pretty; }

/* ---------- 3. the daily exhibit ---------- */
.dw-daily { padding: 52px 26px 20px; }
.dw-daily-main { text-align: center; }
.dw-daily-h2 { margin-top: 14px; }
.dw-phone { display: none; }

.dw-exhibit-card { margin-top: 34px; background: var(--cream-0); border: 1px solid var(--hairline-strong); border-radius: 6px; box-shadow: var(--shadow-card); padding: 26px 22px 30px; text-align: center; }

/* app screen atoms (shared by phone + mobile card) */
.dw-app-todaylabel { color: var(--gold-1); font-style: italic; font-family: var(--font-display); font-size: 15px; text-align: center; }
.dw-app-diamond { text-align: center; color: var(--gold-3); font-size: 9px; margin-top: 5px; }
.dw-app-framewrap { position: relative; width: 100%; max-width: 280px; margin: 14px auto 0; }
.dw-app-framewrap img { width: 100%; display: block; }
.dw-app-plaque { bottom: 2%; padding: 4px 14px; font-size: 9px; }
.dw-app-exhibit-title { font-family: var(--font-display); font-weight: 600; font-size: 28px; color: var(--ink-1); margin-top: 18px; }
.dw-app-exhibit-sub { font-style: italic; font-size: 14px; color: var(--ink-2); margin-top: 3px; }
.dw-app-narrative { font-size: 14.5px; line-height: 1.65; color: var(--ink-1); margin: 14px auto 0; max-width: 305px; text-wrap: pretty; }
.dw-app-facts { display: flex; justify-content: center; margin-top: 18px; }
.dw-app-fact { text-align: center; padding: 0 18px; white-space: nowrap; }
.dw-app-fact-label { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-1); font-weight: 600; margin-bottom: 4px; }
.dw-app-fact-val { font-size: 13px; color: var(--ink-1); }
.dw-app-fact-div { border-left: 1px solid var(--hairline); }
.dw-app-explore { display: inline-block; margin-top: 20px; padding: 11px 24px; border: 1px solid var(--hairline-strong); border-radius: 3px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-1); background: var(--cream-0); cursor: pointer; }

/* feature cards */
.dw-features { display: flex; flex-direction: column; gap: 16px; margin-top: 34px; text-align: left; }
.dw-feature { background: var(--cream-2); border: 1px solid var(--hairline); border-radius: 6px; padding: 24px 26px; }
.dw-feature-label { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-1); font-weight: 600; margin-top: 14px; }
.dw-feature-text { font-family: var(--font-body); font-style: italic; font-size: 16px; line-height: 1.6; color: var(--ink-1); margin: 9px 0 0; text-wrap: pretty; }

/* ---------- 4. eight wings ---------- */
.dw-wings { padding: 24px 24px 50px; text-align: center; }
.dw-swipe-hint { font-family: var(--font-body); font-style: italic; font-size: 13px; color: var(--ink-3); margin: 14px 0 0; }
.dw-wings-floor-wrap { display: none; }
.dw-wing-icon { display: inline-block; width: 24px; height: 24px; background-color: var(--gold-1); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; }
.dw-wing-num { font-family: var(--font-display); font-style: italic; font-size: 15px; color: var(--gold-2); line-height: 1; }
.dw-wing-name { font-family: var(--font-body); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-1); font-weight: 600; text-align: center; }

.dw-wings-swipe { display: flex; gap: 14px; margin: 26px -24px 0; padding: 4px 24px 8px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.dw-wings-swipe::-webkit-scrollbar { display: none; }
.dw-wingcard { scroll-snap-align: start; flex: 0 0 auto; width: 132px; border: 1px solid var(--hairline-strong); background: var(--cream-1); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 26px 14px; }

.dw-tags-lead { font-family: var(--font-body); font-style: italic; font-size: 16px; color: var(--ink-2); text-align: center; margin: 40px auto 0; }
.dw-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; max-width: 860px; margin: 22px auto 0; }
.dw-tag { display: inline-flex; align-items: center; gap: 9px; padding: 8px 18px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--cream-0); font-family: var(--font-body); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2); white-space: nowrap; transition: all 180ms ease; }
.dw-tag > i { font-size: 15px; letter-spacing: 0; font-style: normal; }
@media (hover: hover) { .dw-tag:hover { border-color: var(--hairline-gold); color: var(--gold-1); background: var(--cream-2); } }

/* ---------- 5/7. step rows (earn stars, personal wing) ---------- */
.dw-earn { padding: 24px 26px 56px; text-align: center; }
.dw-personal { padding: 52px 26px 56px; text-align: center; }
.dw-steps { display: flex; flex-direction: column; align-items: center; margin-top: 44px; }
.dw-step { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 10px; }
.dw-step-art { height: 120px; display: flex; align-items: center; justify-content: center; position: relative; }
.dw-step-num { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold-1); font-weight: 600; margin-top: 20px; }
.dw-step-text { font-family: var(--font-body); font-style: italic; font-size: 16px; line-height: 1.6; color: var(--ink-2); margin: 9px auto 0; max-width: 280px; text-wrap: pretty; }
.dw-step-div { width: 1px; height: 44px; background: var(--hairline-strong); margin: 28px auto; }
.dw-star-row { display: flex; gap: 12px; align-items: center; }
.dw-star-count { font-family: var(--font-body); font-style: italic; font-size: 14px; color: var(--ink-3); margin-top: 14px; }
.dw-step-art > .dw-star-row + .dw-star-count { position: absolute; bottom: -24px; }
.dw-vault { position: relative; width: 150px; height: 120px; }
.dw-vault-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); text-align: center; }
.dw-vault-title { font-family: var(--font-body); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-1); font-weight: 600; white-space: nowrap; }
.dw-vault-sub { font-family: var(--font-body); font-style: italic; font-size: 10px; color: var(--ink-3); margin-top: 3px; white-space: nowrap; }
.dw-heart-wrap { position: relative; }
.dw-heart-img { width: 120px; display: block; filter: drop-shadow(0 8px 14px rgba(58,44,18,0.18)); }
.dw-heart-badge { position: absolute; right: -14px; bottom: -4px; width: 34px; height: 34px; border-radius: 50%; background: var(--cream-0); border: 1px solid var(--gold-3); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 8px rgba(58,44,18,0.14); }

/* ---------- 6. gallery ---------- */
.dw-gallery { background: var(--cream-2); text-align: center; padding: 52px 22px; }
.dw-gallery-sub { font-family: var(--font-body); font-style: italic; font-size: 16px; color: var(--ink-2); margin: 12px auto 0; }
.dw-salon { display: none; }
.dw-cabinet { margin: 32px auto 0; background: #6E5137; border-radius: 4px; padding: 10px; box-shadow: 0 20px 44px rgba(58,44,18,0.28), inset 0 1px 0 #8A6E4E; }
.dw-cabinet-inner { background: #54402A; border: 1px solid #46351f; border-radius: 2px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 8px; }
.dw-drawer { background: var(--cream-1); box-shadow: inset 0 3px 14px rgba(58,44,18,0.30); display: flex; flex-direction: column; align-items: center; padding: 20px 12px 14px; min-height: 190px; }
.dw-drawer--locked { background: var(--cream-3); box-shadow: inset 0 3px 14px rgba(58,44,18,0.34); }
.dw-drawer-art { flex: 1; display: flex; align-items: center; justify-content: center; }
.dw-drawer-art img { max-height: 120px; width: auto; max-width: 100%; display: block; }
.dw-drawer-art--msg { flex-direction: column; gap: 8px; text-align: center; font-family: var(--font-body); font-style: italic; font-size: 12.5px; color: var(--ink-3); }
.dw-drawer-star { color: var(--gold-2); font-size: 15px; }
.dw-drawer-veil { color: var(--gold-3); font-size: 12px; }
.dw-drawer-plaque { margin-top: 14px; background: linear-gradient(180deg, var(--brass-hi), var(--brass-mid)); border: 1px solid var(--brass-lo); border-radius: 2px; padding: 5px 12px 6px; text-align: center; }
.dw-drawer-plaque--locked { background: none; border: 1px solid var(--hairline-strong); }
.dw-drawer-cat { font-family: var(--font-body); font-size: 7.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass-text); opacity: 0.7; }
.dw-drawer-name { font-family: var(--font-body); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brass-text); font-weight: 600; margin-top: 1px; }
.dw-drawer-plaque--locked .dw-drawer-cat, .dw-drawer-plaque--locked .dw-drawer-name { color: var(--ink-3); opacity: 1; }

/* ---------- 8. footer ---------- */
.dw-footer { border-top: 1px solid var(--hairline); background: var(--cream-2); text-align: center; padding: 56px 26px 60px; }
.dw-footer-logo svg { display: block; margin: 0 auto; }
.dw-footer-wordmark { font-family: var(--font-display); font-weight: 600; font-size: 19px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-1); margin-top: 22px; }
.dw-footer-tagline { font-family: var(--font-body); font-style: italic; font-size: 13px; color: var(--ink-2); margin-top: 8px; }
.dw-stores--footer { align-items: center; justify-content: center; margin-top: 36px; }
.dw-footer-star { color: var(--gold-3); font-size: 11px; margin-top: 36px; }
.dw-footer-copy { font-family: var(--font-body); font-size: 13px; color: var(--ink-3); margin-top: 14px; }

/* ============================================================
   DESKTOP  (>= 900px)
   ============================================================ */
@media (min-width: 900px) {
  .dw-mobilebar { display: none; }

  /* hero */
  .dw-hero { padding: 70px 90px 40px; align-items: center; }
  .dw-hero-inner { display: grid; grid-template-columns: 1fr 560px; gap: 90px; align-items: center; max-width: 1320px; margin: 0 auto; width: 100%; }
  .dw-hero-copy { text-align: left; }
  .dw-hero-art { order: 0; }
  .dw-hero-logo { display: flex; align-items: center; gap: 14px; width: fit-content; }
  .dw-h1 { font-size: 76px; line-height: 1.08; margin: 48px 0 0; }
  .dw-lead { font-size: 19px; margin: 24px 0 0; max-width: 440px; text-align: left; }
  .dw-frame-wrap { width: 100%; }
  .dw-hero .dw-stores { flex-direction: row; align-items: flex-start; justify-content: flex-start; gap: 16px; margin-top: 40px; }

  /* philosophy */
  .dw-philosophy { padding: 96px 24px 88px; }
  .dw-eyebrow--wide { font-size: 13px; }
  .dw-h2 { font-size: 46px; line-height: 1.12; margin: 18px 0 0; }
  .dw-h2--lg { font-size: 52px; line-height: 1.15; }
  .dw-rule-diamond { gap: 16px; margin: 30px auto 0; max-width: 300px; }
  .dw-pullquote { font-size: 31px; line-height: 1.45; margin: 30px 0 0; }
  .dw-manifesto { font-size: 19px; margin: 34px auto 0; }

  /* daily exhibit */
  .dw-daily { padding: 70px 80px 120px; }
  .dw-daily-grid { display: grid; grid-template-columns: auto 1fr; gap: 80px; align-items: center; max-width: 1320px; margin: 0 auto; }
  .dw-daily-main { text-align: left; }
  .dw-eyebrow { font-size: 13px; }
  .dw-daily-h2 { max-width: 620px; margin-top: 18px; }
  .dw-exhibit-card { display: none; }
  .dw-phone { display: block; position: relative; width: 402px; height: 874px; border-radius: 48px; overflow: hidden; background: #F2F2F7; box-shadow: 0 40px 80px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.12); flex-shrink: 0; }
  .dw-phone-island { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 126px; height: 37px; border-radius: 24px; background: #000; z-index: 50; }
  .dw-phone-status { position: absolute; top: 0; left: 0; right: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 20px 30px 0; }
  .dw-phone-time { font-family: -apple-system, "SF Pro", system-ui, sans-serif; font-weight: 600; font-size: 15px; color: #14100A; }
  .dw-phone-status-icons { display: flex; align-items: center; gap: 6px; }
  .dw-phone-screen { position: relative; height: 100%; display: flex; flex-direction: column; background: var(--cream-1); overflow: hidden; font-family: var(--font-body); }
  .dw-app-head { padding: 64px 20px 8px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
  .dw-app-title { font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-1); text-align: center; }
  .dw-app-actions { justify-self: end; display: flex; gap: 14px; }
  .dw-phone .dw-app-todaylabel { font-family: inherit; font-size: 14px; }
  .dw-phone .dw-app-diamond { font-size: 8px; }
  .dw-app-body { flex: 1; overflow: hidden; padding: 12px 24px 0; text-align: center; }
  .dw-phone .dw-app-framewrap { max-width: 320px; margin-top: 0; }
  .dw-phone .dw-app-exhibit-title { font-size: 26px; margin-top: 16px; }
  .dw-phone .dw-app-narrative { font-size: 13.5px; line-height: 1.6; margin-top: 12px; }
  .dw-phone .dw-app-facts { margin-top: 14px; }
  .dw-phone .dw-app-fact { padding: 0 20px; }
  .dw-phone .dw-app-fact-label { font-size: 9px; }
  .dw-phone .dw-app-fact-val { font-size: 12.5px; }
  .dw-phone .dw-app-explore { margin-top: 14px; padding: 10px 22px; font-size: 10.5px; }
  .dw-app-tabs { border-top: 1px solid var(--hairline); display: flex; padding: 10px 8px 26px; background: var(--cream-0); }
  .dw-app-tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--ink-3); }
  .dw-app-tab.is-active { color: var(--gold-1); }
  .dw-app-tab > span { font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; }
  .dw-app-tab.is-active > span { font-weight: 600; }
  .dw-phone-home { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 139px; height: 5px; border-radius: 100px; background: rgba(0,0,0,0.25); z-index: 60; }

  /* features 2x2 */
  .dw-features { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 44px; }
  .dw-feature { padding: 28px 30px; }
  .dw-feature-label { margin-top: 16px; }
  .dw-feature-text { font-size: 16.5px; }

  /* wings */
  .dw-wings { padding: 50px 90px 70px; }
  .dw-swipe-hint { display: none; }
  .dw-wings-swipe { display: none; }
  .dw-wings-floor-wrap { display: block; max-width: 960px; margin: 56px auto 0; position: relative; }
  .dw-wings-floor { border: 2px solid var(--ink-2); background: var(--ink-2); display: grid; grid-template-columns: 1fr 1.4fr 1fr; grid-auto-rows: 170px; gap: 2px; box-shadow: 0 1px 0 var(--hairline-strong), 0 14px 34px rgba(58,44,18,0.10); }
  .dw-wing { background: var(--cream-1); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
  .dw-wing .dw-wing-name { font-size: 13px; letter-spacing: 0.16em; }
  .dw-grandhall { background: var(--cream-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; }
  .dw-grandhall-star { color: var(--gold-1); font-size: 16px; }
  .dw-grandhall-title { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--ink-1); }
  .dw-grandhall-sub { font-family: var(--font-body); font-style: italic; font-size: 14.5px; color: var(--ink-2); }
  .dw-wings-entrance { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; font-family: var(--font-body); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); }
  .dw-wings-entrance > span { width: 34px; border-top: 1px solid var(--hairline-gold); }
  .dw-floor-stage { position: relative; }
  .dw-door { position: absolute; transform: translate(-50%,-50%); }
  .dw-door-entrance { position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%); width: 48px; height: 10px; background: var(--cream-1); }
  .dw-door-threshold { position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%); width: 48px; display: flex; flex-direction: column; gap: 3px; }
  .dw-door-threshold span { border-top: 1px solid var(--hairline-strong); }
  .dw-tags-lead { font-size: 18px; margin-top: 56px; }
  .dw-tags { gap: 14px; margin-top: 28px; }

  /* step rows */
  .dw-earn { padding: 40px 90px 130px; }
  .dw-personal { padding: 90px 90px 70px; }
  .dw-steps { flex-direction: row; align-items: stretch; justify-content: center; max-width: 1100px; margin: 72px auto 0; }
  .dw-step { flex: 1; padding: 0 28px; max-width: 340px; }
  .dw-step-num { margin-top: 26px; }
  .dw-step-text { font-size: 16px; max-width: 250px; margin-top: 10px; }
  .dw-step-div { width: 1px; height: 120px; margin: 0; align-self: center; }
  .dw-personal .dw-step-art { height: 130px; }
  .dw-star-row { gap: 14px; }
  .dw-heart-img { width: 130px; }
  .dw-heart-badge { right: -16px; bottom: -6px; width: 36px; height: 36px; }

  /* gallery — salon wall */
  .dw-gallery { padding: 70px 40px 70px; }
  .dw-gallery-sub { font-size: 18px; margin-top: 14px; }
  .dw-cabinet { display: none; }
  .dw-salon { display: block; max-width: 1100px; margin: 36px auto 0; position: relative; aspect-ratio: 1100 / 620; }
  .dw-salon-item { position: absolute; text-align: center; }
  .dw-salon-item img { width: 100%; display: block; filter: drop-shadow(0 10px 18px rgba(58,44,18,0.18)); }
  .dw-salon-plaque { display: inline-block; margin-top: 12px; background: linear-gradient(180deg, var(--brass-hi), var(--brass-mid)); border: 1px solid var(--brass-lo); border-radius: 2px; padding: 2px 7px 3px; line-height: 1; font-family: var(--font-body); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass-text); font-weight: 600; white-space: nowrap; }
  .dw-salon-plaque--locked { background: none; border: 1px solid var(--hairline-strong); color: var(--ink-3); }
  .dw-salon-locked { width: 100%; border: 1px solid var(--hairline-strong); background: var(--cream-2); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 600; font-size: 38px; color: var(--ink-3); }

  /* footer */
  .dw-footer { padding: 88px 90px 72px; }
  .dw-stores--footer { flex-direction: row; gap: 18px; margin-top: 44px; }
  .dw-footer-star { margin-top: 40px; }
}