/* =====================================================================
   ROUND 10 · start dates in the hero, paper ground instead of the room photo
   ===================================================================== */
.hero__bg--paper { background:
  radial-gradient(70% 60% at 78% 30%, rgb(255 236 210 / 0.9), transparent 70%),
  radial-gradient(60% 50% at 10% 90%, rgb(232 214 190 / 0.7), transparent 70%),
  var(--white); }
.hero__dates { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.hero__date { display: grid; gap: 3px; padding: 9px 14px; border-radius: var(--r); background: rgb(246 243 238 / 0.85); border: 1px solid var(--line); }
.hero__date .label { font-size: 0.64rem; }
.hero__date b { font-family: var(--sc-font-display); font-weight: 500; font-size: 0.98rem; letter-spacing: -0.02em; color: var(--text); }
.hero__date:first-child b { color: var(--acc); }
@media (max-width: 860px) {
  .hero__dates { gap: 8px; }
  .hero__date { flex: 1; padding: 8px 10px; }
  .hero__date b { font-size: 0.9rem; }
}
/* the dates already say "today"; the panel at the bottom repeats it */
.hero .hero__today { display: none; }
@media (max-width: 860px) and (max-height: 720px) { .hero__julia { height: 40svh; } .hcard--a { bottom: 22svh; } }

@media (max-width: 860px) and (max-height: 720px) { .hero__julia { height: 35svh; } }
/* make-up swatches on paper: a quiet test sheet behind the hero */
.hero__bg--paper img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 100%; opacity: 0.85; }
@media (max-width: 860px) { .hero__bg--paper img { object-position: 85% 100%; opacity: 0.7; } }
/* the start date sits where the kicker was */
.hero__start b { color: var(--acc); font-weight: 600; }

@media (max-width: 860px) and (max-height: 720px) { .hero__julia { height: 46svh; } }