/* Black Friday: live text and controls around the user's octopus artwork. */
.home-popup {
  position: fixed;
  inset: 0;
  width: min(1120px, calc(100% - 40px));
  max-width: none;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid #d9b96870;
  border-radius: 22px;
  background: #101113;
  color: #f7f3e9;
  box-shadow: 0 30px 120px #000c;
}
.home-popup:not([open]) { display: none; }
.home-popup::backdrop { background: #050710d9; backdrop-filter: blur(7px); }
.home-popup-bar { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 24px; border-bottom: 1px solid #ead6a31a; background: #101113; }
.home-popup-brand { display: flex; align-items: center; gap: 10px; }
.home-popup-brand img { width: 44px; height: 44px; object-fit: contain; }
.home-popup-brand > span { font: 600 20px/1.2 var(--heading); letter-spacing: -.03em; }
.home-popup-brand small { display: block; margin-top: 5px; font: 500 9px/1.4 var(--font); letter-spacing: .12em; color: #bab4a5; }
.home-popup-close { display: grid; place-items: center; flex: none; width: 44px; height: 44px; padding: 0; border: 1px solid #ffffff29; border-radius: 50%; background: #ffffff04; color: #f7f3e9; font-size: 28px; line-height: 1; }
.home-popup-close:hover { color: #ffdb34; border-color: #ffdb34; }
.home-popup-close:focus-visible { outline-offset: 2px; }
.home-popup-content { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); align-items: center; gap: 22px; padding: 34px 36px 38px; background: radial-gradient(ellipse at 80% 45%, #b38b3517, transparent 62%); }
.home-popup-copy { min-width: 0; }
.home-popup-eyebrow { display: flex; align-items: center; gap: 9px; color: #e9dba9; font-size: 12px; font-weight: 600; letter-spacing: .14em; }
.home-popup-eyebrow > span { color: #ffdb34; font-size: 20px; }
.home-popup-title { margin-top: 24px; font-size: clamp(60px, 7.5vw, 90px); font-weight: 650; line-height: .96; letter-spacing: -.065em; }
.home-popup-title > span { color: #ffdb34; }
.home-popup-offer { margin-top: 27px; font: 500 27px/1.3 var(--heading); letter-spacing: -.035em; }
.home-popup-offer strong { color: #ffdb34; font-weight: 650; }
.home-popup-description { max-width: 390px; margin-top: 17px; color: #d2cfc5; font-size: 16px; line-height: 1.8; }
.home-popup-contact { margin-top: 27px; min-height: 56px; gap: 28px; background: linear-gradient(110deg,#ffdf40,#ffd023); color: #15120a; }
.home-popup-contact:hover { background: #ffe771; }
.home-popup-note { margin-top: 11px; color: #c8bea1; font-size: 12px; line-height: 1.6; }
.home-popup-art { min-width: 0; width: 100%; }
/* Display the illustration area of the unchanged 1522 × 1033 reference.
   Framing excludes its header, text column, close icon and baked-in scrollbar. */
.home-popup-artwork { position: relative; width: 100%; aspect-ratio: 850 / 800; overflow: hidden; border-radius: 12px; }
.home-popup-artwork img { position: absolute; max-width: none; width: 179.058824%; height: auto; left: -75.294118%; top: -18.75%; }
.home-popup-footer { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 17px 28px; border-top: 1px solid #ead6a31a; }
.home-popup-footer > p { color: #aaa599; font-size: 11px; line-height: 1.65; }
.home-popup-dismiss { display: inline-flex; align-items: center; justify-content: center; gap: 18px; min-height: 44px; padding: 10px 14px; border: 1px solid #ffffff29; border-radius: 7px; background: transparent; color: #e6decc; font-size: 12px; }
.home-popup-dismiss:hover { border-color: #ffdb34; color: #ffdb34; }
html.home-popup-open, .home-popup-open body { overflow: hidden; }
@media (max-width: 900px) {
  .home-popup-content { gap: 16px; padding: 28px; }
  .home-popup-title { font-size: 70px; }
  .home-popup-offer { font-size: 24px; }
  .home-popup-eyebrow { font-size: 11px; letter-spacing: .09em; }
}
@media (max-width: 700px) {
  .home-popup { width: calc(100% - 24px); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); border-radius: 16px; }
  .home-popup-bar { padding: 10px 16px; }
  .home-popup-content { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 26px 24px 20px; }
  .home-popup-title { font-size: clamp(56px, 16vw, 82px); }
  .home-popup-art { max-width: 480px; margin-inline: auto; }
  .home-popup-contact { width: 100%; }
  .home-popup-note { text-align: center; }
  .home-popup-footer { padding: 12px 24px; justify-content: center; }
  .home-popup-footer > p { display: none; }
  .home-popup-dismiss { width: 100%; }
}
@media (max-width: 360px) {
  .home-popup-brand small { font-size: 8px; letter-spacing: .04em; }
  .home-popup-content { padding-inline: 20px; }
  .home-popup-eyebrow { font-size: 10px; letter-spacing: .06em; }
  .home-popup-contact { gap: 12px; padding-inline: 16px; font-size: 15px; }
}
@media (forced-colors: active) {
  .home-popup, .home-popup-bar, .home-popup-footer, .home-popup-close, .home-popup-dismiss { border-color: CanvasText; }
  .home-popup-title > span, .home-popup-offer strong, .home-popup-description, .home-popup-note, .home-popup-eyebrow, .home-popup-brand small, .home-popup-footer > p, .home-popup-dismiss { color: CanvasText; }
}