/* =====================================================================
   ROUND 6 · the buy button lives at the bottom, always burgundy;
   Julia (window portrait) centred and bigger on the phone
   ===================================================================== */

/* the panel is there from the first screen; the hero no longer repeats the button */
.stick { transform: none; }
.hero__buy .btn { display: none; }
.hero__today { font-size: 1rem; }
.hero__copy { padding-bottom: var(--stick-h); }

/* always burgundy; on hover a deeper burgundy rises from below */
.btn, .btn:hover, .btn:focus-visible,
.ch--ink .btn, .ch--ink .btn:hover, .ch--ink .btn:focus-visible,
.buy .btn { background: var(--acc); color: #F7F2EC; border-color: var(--acc-edge); }
.btn::before { background: #5A1520; }
.btn .tag, .ch--ink .btn .tag, .buy .btn .tag { border-left-color: rgb(247 242 236 / 0.34); }
.ch--ink .btn { border-color: #B0525C; }
.stick__cta { box-shadow: 0 10px 24px -12px rgb(90 21 32 / 0.6); }

/* desktop: the new portrait, a little larger */
@media (min-width: 861px) {
  .hero__julia { height: 104svh; bottom: -14svh; right: 4%; }
  .hero__julia img { -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 22%); mask-image: linear-gradient(to top, transparent 0%, #000 22%); }
}

/* phone: Julia in the middle, big; the cards stay at the edges */
@media (max-width: 860px) {
  .hero__copy { padding-top: 3svh; }
  .hero__julia { height: 62svh; bottom: calc(var(--stick-h) - 4svh); }
  .hero__julia img { -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 16%); mask-image: linear-gradient(to top, transparent 0%, #000 16%); }
  .hcard { --w: 22vw; }
  .hcard--a { left: 1vw; bottom: 34svh; --r0: -9deg; }
  .hcard--b { left: 1vw; bottom: calc(var(--stick-h) + 4svh); }
  .hcard--c { right: 1vw; bottom: calc(var(--stick-h) + 8svh); }
}
@media (max-width: 860px) and (max-height: 720px) {
  .hero__julia { height: 54svh; }
  .hcard { --w: 19vw; }
  .hcard--a { bottom: 30svh; }
}

@media (max-width: 860px) and (max-height: 720px) { .hero__julia { height: 47svh; bottom: calc(var(--stick-h) - 2svh); } .hero__sub { font-size: 0.95rem; } }