/* Only the two replacement portraits and the requested photo/sky join. */
@layer portraits-20260909 {
  main > .portrait-refresh .apple-photo-frame {
    background: #d6d1cc !important;
  }
  main > .portrait-refresh:not(.portrait-refresh-full) img.hero-note-photo {
    object-position: 47% center !important;
    filter: none !important;mix-blend-mode: normal !important;
  }
  main > .portrait-refresh:not(.portrait-refresh-full) .apple-photo-frame {
    /* The frame bleeds 4px above its section. Start exactly at the join. */
    --portrait-fog-top: 4px;
    --portrait-fog-height: 8%;
    --portrait-fog-rgb: 245,243,239;
    --portrait-fog-alpha: 1;
  }
  main > .portrait-refresh-full {
    --portrait-height: clamp(560px,62vw,820px);
    display: flex !important;flex-direction: column !important;
    height: auto !important;min-height: 0 !important;
    background: transparent !important;
    /* Share the existing About sky above the photo, below the copy. */
    z-index: auto !important;isolation: auto !important;
  }
  main > .portrait-refresh-full .apple-photo-frame {
    order: 0;position: relative !important;inset: auto !important;
    width: 100% !important;height: var(--portrait-height) !important;
    flex: 0 0 var(--portrait-height);border-radius: 0 !important;
    -webkit-mask-image: none !important;mask-image: none !important;
    overflow: hidden !important;
    z-index: 1 !important;
  }
  main > .portrait-refresh-full .hero-note-picture {
    position: absolute !important;inset: 0 !important;
    width: 100% !important;height: 100% !important;
    transform: none !important;translate: none !important;
  }
  main > .portrait-refresh-full img.hero-note-photo {
    position: absolute !important;inset: 0 auto 0 50% !important;
    width: auto !important;max-width: none !important;height: 100% !important;
    object-fit: contain !important;object-position: center !important;
    transform: translateX(-58.5%) !important;scale: 1 !important;filter: none !important;
    /* Keep the shoes visible. Feather only the empty floor below them so
       the grey fog crosses the image's physical edge without a seam. */
    -webkit-mask-image: linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,#000 0%,#000 97%,transparent 100%) !important;
    mask-image: linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent),linear-gradient(180deg,#000 0%,#000 97%,transparent 100%) !important;
    -webkit-mask-composite: source-in !important;mask-composite: intersect !important;
  }
  main > .portrait-refresh .apple-photo-frame::before {
    content: "" !important;position: absolute !important;
    inset: var(--portrait-fog-top,0px) 0 auto !important;
    height: var(--portrait-fog-height,14%) !important;z-index: 2 !important;
    pointer-events: none !important;
    /* Shared reversed white fog. Portrait 2 meets the first hero's warm white;
       portrait 3 keeps the approved 14% fade, clear of the head at 15.65%. */
    background: linear-gradient(180deg,rgba(var(--portrait-fog-rgb,246,247,249),var(--portrait-fog-alpha,.98)) 0%,rgba(var(--portrait-fog-rgb,246,247,249),.91) 14%,rgba(var(--portrait-fog-rgb,246,247,249),.74) 30%,rgba(var(--portrait-fog-rgb,246,247,249),.48) 50%,rgba(var(--portrait-fog-rgb,246,247,249),.22) 70%,rgba(var(--portrait-fog-rgb,246,247,249),.08) 86%,transparent 100%) !important;
  }
  main > .portrait-refresh-full .apple-photo-frame::after {display: none !important;}
  main > .portrait-refresh-full > .apple-panel-copy {
    order: 1;position: relative !important;inset: auto !important;
    transform: none !important;align-self: center !important;
    padding-top: 8px !important;
    z-index: 4 !important;
  }
  main > .portrait-refresh-full::before {
    content: "" !important;position: absolute !important;
    inset: var(--portrait-height) 0 0 !important;z-index: 2 !important;
    pointer-events: none !important;
    background: #d6d1cc !important;
  }
  main > .portrait-refresh-full::after {display: none !important;}
  #despre .about-galaxy-backdrop[data-portrait-sky] {
    top: var(--portrait-sky-top) !important;
    height: var(--portrait-sky-height) !important;
    background: var(--portrait-sky-background) !important;
    -webkit-mask-image: var(--portrait-sky-mask) !important;
    mask-image: var(--portrait-sky-mask) !important;
  }
  @media (max-width: 820px) {
    main > .portrait-refresh-full {--portrait-height: clamp(430px,130vw,740px);}
    main > .portrait-refresh-full img.hero-note-photo {
      -webkit-mask-image: linear-gradient(180deg,#000 0%,#000 97%,transparent 100%) !important;
      mask-image: linear-gradient(180deg,#000 0%,#000 97%,transparent 100%) !important;
    }
  }
  @media (min-width: 821px) {
    /* The portrait source has substantial empty space above the three poses.
       Keep the same image and fog, framed for a wide desktop viewport. */
    main > .apple-panel-hero .hero-note-picture {
      position: absolute !important;inset: 0 !important;
      width: 100% !important;height: 100% !important;transform: none !important;
    }
    main > .apple-panel-hero img.hero-note-photo-original {
      position: absolute !important;inset: 0 auto auto 50% !important;
      width: min(100%,1140px) !important;height: auto !important;
      max-width: none !important;object-fit: contain !important;
      transform: translate(-50%,-20%) !important;scale: 1 !important;
      -webkit-mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent) !important;
      mask-image: linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent) !important;
    }
  }
}