/* =====================================================================
   ROUND 24 · tutorial ✕ / my course ✓, and the drawer of six items
   ===================================================================== */

/* ---------- ✕ / ✓ */
.yt .ch__head { margin-bottom: clamp(32px, 4vw, 56px); }
.yt .h2 .w-heavy { color: #E08A93; }
.vs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vs__card { position: relative; border-radius: 10px; padding: clamp(20px, 3vw, 32px); display: grid; align-content: start; gap: 14px; }
.vs__card--no { background: #1F1D1D; border: 1px solid rgb(239 234 227 / 0.14); color: #B8AFA4; }
.vs__card--yes { background: #F7F2EC; color: #1C1916; box-shadow: 0 30px 60px -30px rgb(0 0 0 / 0.8); }
.vs__head { display: flex; align-items: center; gap: 12px; font-family: var(--sc-font-display); font-weight: 700; font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem); letter-spacing: -0.02em; }
.vs__card--no .vs__head { color: #D9D1C5; }
.vs__mark { flex: none; width: 40px; height: 40px; border-radius: 50%; position: relative; }
.vs__card--no .vs__mark { background: #3A2626; }
.vs__card--yes .vs__mark { background: #2E7D4F; }
.vs__card--no .vs__mark::before, .vs__card--no .vs__mark::after { content: ""; position: absolute; left: 11px; top: 19px; width: 18px; height: 2.5px; border-radius: 2px; background: #E0707B; transform: rotate(45deg); }
.vs__card--no .vs__mark::after { transform: rotate(-45deg); }
.vs__card--yes .vs__mark::after { content: ""; position: absolute; left: 12px; top: 12px; width: 16px; height: 8px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg); }
.vs__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.vs__list li { position: relative; padding: 11px 0 11px 28px; border-top: 1px solid currentColor; border-color: rgb(127 127 127 / 0.22); line-height: 1.45; }
.vs__card--no .vs__list li::before, .vs__card--no .vs__list li::after { content: ""; position: absolute; left: 3px; top: 21px; width: 12px; height: 1.8px; background: #E0707B; transform: rotate(45deg); }
.vs__card--no .vs__list li::after { transform: rotate(-45deg); }
.vs__card--yes .vs__list li::before { content: ""; position: absolute; left: 3px; top: 16px; width: 11px; height: 6px; border-left: 2px solid #2E7D4F; border-bottom: 2px solid #2E7D4F; transform: rotate(-45deg); }
.vs__sum { font-family: var(--sc-font-display); font-weight: 600; font-size: 1.05rem; letter-spacing: -0.01em; }
.vs__card--no .vs__sum { color: #8E857A; text-decoration: line-through; text-decoration-color: rgb(224 112 123 / 0.6); }
.vs__card--yes .vs__sum { color: #2E7D4F; }
@media (prefers-reduced-motion: no-preference) {
  .vs__card { opacity: 0; transition: opacity 700ms var(--sc-ease-out), transform 900ms cubic-bezier(0.22, 1, 0.36, 1); }
  .vs__card--no { transform: translateX(-40px) rotate(-1.5deg); }
  .vs__card--yes { transform: translateX(40px) rotate(1.5deg); transition-delay: 200ms; }
  .vs.is-in .vs__card { opacity: 1; transform: none; }
  .vs.is-in .vs__card--yes { transform: scale(1.02); }
}
@media (max-width: 860px) {
  .vs { grid-template-columns: 1fr; }
  .vs.is-in .vs__card--yes { transform: none; }
}

/* ---------- the drawer */
.bag { padding-bottom: clamp(56px, 7vw, 100px); }
.drawer__lead { font-family: var(--sc-font-display); font-weight: 500; font-size: clamp(1.15rem, 1rem + 0.7vw, 1.6rem); line-height: 1.3; letter-spacing: -0.02em; max-width: 30ch; color: var(--text); }
.drawer { margin-top: clamp(28px, 4vw, 48px); padding: clamp(20px, 3vw, 36px); border-radius: 10px;
  background: #FBF8F3 radial-gradient(120% 90% at 20% 0%, rgb(255 255 255 / 0.9), transparent 60%);
  box-shadow: inset 0 0 0 1px rgb(18 18 18 / 0.06), 0 24px 50px -36px rgb(18 18 18 / 0.5); overflow: hidden; }
.drawer__row { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(8px, 1.6vw, 20px); }
.drawer__item { display: grid; justify-items: center; gap: 10px; text-align: center; position: relative; }
.drawer__obj { position: relative; display: block; width: 100%; aspect-ratio: 1; }
.drawer__obj img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 14px 14px rgb(60 44 28 / 0.22)); }
.drawer__name { font-family: var(--sc-font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--text); }
.drawer__text { margin-top: clamp(24px, 3vw, 36px); max-width: 62ch; color: var(--soft); line-height: 1.65; }
/* each item flies in from its own direction and lands with a little bounce */
@media (prefers-reduced-motion: no-preference) {
  .drawer__obj { opacity: 0; transform: translate(var(--fx, 0), var(--fy, -120px)) rotate(var(--fr, 20deg)) scale(0.8); }
  .drawer.is-in .drawer__obj { animation: drop 900ms cubic-bezier(0.34, 1.4, 0.5, 1) forwards; animation-delay: calc(var(--i) * 110ms); }
  @keyframes drop { to { opacity: 1; transform: none; } }
  .drawer__name { opacity: 0; transition: opacity 500ms; }
  .drawer.is-in .drawer__name { opacity: 1; transition-delay: calc(var(--i) * 110ms + 500ms); }
  .drawer__item--foundation { --fx: -60px; --fy: -140px; --fr: -24deg; }
  .drawer__item--concealer { --fx: 30px; --fy: -170px; --fr: 30deg; }
  .drawer__item--powder { --fx: 0; --fy: -200px; --fr: -10deg; }
  .drawer__item--brow { --fx: -40px; --fy: -150px; --fr: 60deg; }
  .drawer__item--shadow { --fx: 50px; --fy: -180px; --fr: -18deg; }
  .drawer__item--lipstick { --fx: 70px; --fy: -130px; --fr: 34deg; }
  /* the powder lands in a puff */
  .drawer__item--powder .drawer__obj::after { content: ""; position: absolute; left: 50%; bottom: 8%; width: 90%; height: 50%; translate: -50% 0; border-radius: 50%; pointer-events: none;
    background: radial-gradient(closest-side, rgb(232 210 186 / 0.85), rgb(232 210 186 / 0)); opacity: 0; transform: scale(0.3); }
  .drawer.is-in .drawer__item--powder .drawer__obj::after { animation: puff 1200ms ease-out forwards; animation-delay: calc(2 * 110ms + 650ms); }
  @keyframes puff { 25% { opacity: 1; transform: scale(1.4); } to { opacity: 0; transform: scale(2.2); } }
  /* a gentle hover lift on fine pointers */
  @media (hover: hover) and (pointer: fine) {
    .drawer__item:hover .drawer__obj img { transform: translateY(-6px) rotate(-3deg); transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1); }
  }
}
@media (max-width: 860px) {
  .drawer__row { grid-template-columns: repeat(3, 1fr); row-gap: 22px; }
}
/* until the cut-out photos arrive: a soft paper disc under each name */
.drawer--ph .drawer__obj { border-radius: 50%; background: radial-gradient(circle at 40% 35%, #FFFFFF, #EFE9E1); box-shadow: inset 0 0 0 1.5px rgb(18 18 18 / 0.12); }