/* Progressive enhancement: the page stays visible without JavaScript or animation support. */
:focus-visible {outline-color:#354139}

/* The red-white edging belongs to the collection, separate from keyboard focus. */
body[data-page="beranda"] #main {
  position:relative;
  --collection-frame-red:#a52232;
}
body[data-page="beranda"] #main::before {
  content:"";
  position:absolute;
  top:18px;bottom:20px;
  left:max(20px,calc((100% - 1440px)/2));
  right:max(20px,calc((100% - 1440px)/2));
  border-block:1px solid #b8aa8b;
  background:linear-gradient(90deg,var(--collection-frame-red) 0 3px,#fff 3px 7px,transparent 7px calc(100% - 7px),#fff calc(100% - 7px) calc(100% - 3px),var(--collection-frame-red) calc(100% - 3px));
  pointer-events:none;
  z-index:2;
}
body[data-page="beranda"] .look-art::after {
  content:"";
  position:absolute;inset:0;
  border:1px solid #a5223238;
  border-top:3px solid var(--collection-frame-red);
  box-shadow:inset 0 4px 0 #fff;
  pointer-events:none;
}
@media(max-width:760px) {
  body[data-page="beranda"] #main::before {left:7px;right:7px;top:12px;bottom:14px;background:linear-gradient(90deg,var(--collection-frame-red) 0 2px,#fff 2px 5px,transparent 5px calc(100% - 5px),#fff calc(100% - 5px) calc(100% - 2px),var(--collection-frame-red) calc(100% - 2px))}
}
@media (prefers-reduced-motion:no-preference) {
  .motion-enhanced #main .motion-arrow {
    transition:transform 260ms cubic-bezier(.2,.7,.2,1);
  }
  .motion-enhanced #main :is(.hero-look,.role-card) .portrait {
    transition:transform 440ms cubic-bezier(.2,.7,.2,1);
  }
  .motion-enhanced #main :is(.look-caption,.card-open,.swatch,.model-button) {
    transition:color 180ms ease,background-color 180ms ease,border-color 180ms ease;
  }
  .motion-enhanced .main-nav a {
    transition:color 180ms ease,border-color 240ms ease;
  }
  .motion-enhanced #main :is(.button,.icon-button,.search-clear) {
    transition:background-color 180ms ease,border-color 180ms ease,transform 120ms ease;
  }
  .motion-enhanced #main :is(.button,.icon-button,.search-clear):active:not(:disabled) {
    transform:translateY(1px);
  }
  .motion-enhanced #main details summary i {
    transition:transform 180ms ease;
  }
  .motion-enhanced:not(.intro-pending) #main details[open] > p {
    animation:detail-enter 200ms ease-out both;
  }
  @keyframes detail-enter {
    from {opacity:.65;transform:translateY(4px)}
    to {opacity:1;transform:translateY(0)}
  }
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .motion-enhanced #main :is(.hero-look,.role-card):hover .portrait {
    transform:translateY(-3px);
  }
  .motion-enhanced #main :is(.hero-look,.role-card,.text-button,.button):hover .motion-arrow,
  .motion-enhanced #main :is(.hero-look,.role-card,.text-button,.button):focus-visible .motion-arrow {
    transform:translate(3px,-3px);
  }
}
@media (prefers-reduced-motion:reduce) {
  .motion-enhanced #main :is(.portrait,.motion-arrow,.ui-icon,.button,.icon-button,.search-clear),
  .motion-enhanced #main details > p,
  .motion-enhanced #main details summary i {
    animation:none!important;transition:none!important;
  }
  .motion-enhanced #main :is(.hero-look,.role-card):hover :is(.portrait,.ui-icon),
  .motion-enhanced #main :is(.button,.icon-button,.search-clear):active {
    transform:none!important;
  }
}
@media print {
  .motion-enhanced #main * {animation:none!important;transition:none!important;opacity:1!important;transform:none!important}
}