/* Content frames only. Load after the atmosphere layer. No global img rule:
   wordmarks, navigation icons, scenery and the visualizer remain untouched. */
body[data-mood] {
  --frame-rail: color-mix(in srgb, var(--dream-base) 68%, var(--dream-accent));
  --frame-keyline: color-mix(in srgb, var(--dream-accent) 70%, var(--dream-base));
  --frame-mat: color-mix(in srgb, var(--dream-panel) 84%, var(--dream-accent));
  --frame-shade: color-mix(in srgb, var(--dream-base) 65%, transparent);
  --frame-gutter: 10px;
  --frame-border: 6px;
}
body[data-mood=white] {
  --frame-rail: #e5e6e9;
  --frame-keyline: #b9bcc5;
  --frame-mat: #fff;
  --frame-shade: #20232c14;
}

/* Double rails, a colored mat, a fine outer keyline and a restrained shadow.
   Padding is inside the existing image box, so switching moods never resizes it. */
body[data-mood] :is(
  .portal-art,
  .story-window > img,
  .reading-paper figure > img,
  .bio-photo,
  .archive-folder > img,
  .page-study,
  .cabinet-art,
  .studio-art-grid figure > img,
  .brand-color-grid figure > img,
  .history-drawer > div > img
) {
  box-sizing: border-box;
  border: var(--frame-border) double var(--frame-keyline);
  padding: var(--frame-gutter);
  background: var(--frame-mat);
  box-shadow: 0 0 0 1px var(--frame-rail),
    0 0 0 3px var(--frame-mat),
    0 0 0 4px var(--frame-keyline),
    0 8px 20px -8px var(--frame-shade);
  transition: border-color .35s, background-color .35s, box-shadow .35s;
}

/* The portal's cycling pictures are absolute, so give them a real mat inset.
   The existing arch and each portal's dimensions are retained in every mood. */
body[data-mood] .portal-art .home-scene {
  inset: var(--frame-gutter);
  width: auto;
  height: auto;
  border-radius: inherit;
  overflow: hidden;
}
body[data-mood] .portal-art > img {
  min-width: 0;
  min-height: 0;
}
body[data-mood] .portal-dream .portal-art::after {
  inset: 55% var(--frame-gutter) var(--frame-gutter);
}
body[data-mood] .bio-photo > img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  padding: 0;
  box-shadow: none;
}
/* Historic documents and approved brand art must remain fully visible. */
body[data-mood] :is(.story-window > img, .reading-paper figure > img,
  .archive-folder > img, .brand-color-grid figure > img,
  .history-drawer > div > img) {
  object-fit: contain;
  filter: none;
}

/* Listings get a flat interface frame outside a white photo area, not a
   simulated physical picture frame. No recoloring, cropping or added labels
   that could be mistaken for product attributes. */
body[data-mood] .market .listing-card:nth-child(n) .listing-photo {
  box-sizing: border-box;
  border: 3px double var(--frame-keyline);
  border-radius: 2px;
  padding: 10px;
  background: #fff;
  background-image: none;
  outline: none;
  box-shadow: 0 0 0 2px var(--frame-mat), 0 0 0 3px var(--frame-rail);
  transform: none;
  transition: border-color .35s, box-shadow .35s;
}
body[data-mood] .market .listing-card:nth-child(n),
body[data-mood] .market .listing-card:nth-child(n):hover,
body[data-mood] .market .listing-card:nth-child(n):focus-within {
  transform: none;
}
body[data-mood] .market .listing-card .listing-photo img {
  object-fit: contain;
  filter: none !important;
  transform: none;
  animation: none;
  background: #fff;
}

@media (max-width: 740px) {
  body[data-mood] { --frame-gutter: 6px; --frame-border: 5px; }
  body[data-mood] .market .listing-card:nth-child(n) .listing-photo { padding: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  body[data-mood] :is(.portal-art, .story-window > img,
    .reading-paper figure > img, .bio-photo, .archive-folder > img,
    .page-study, .cabinet-art, .studio-art-grid figure > img,
    .brand-color-grid figure > img, .history-drawer > div > img,
    .market .listing-card .listing-photo) { transition: none; }
}
@media (forced-colors: active) {
  body[data-mood] { --frame-keyline: CanvasText; --frame-mat: Canvas; --frame-rail: CanvasText; }
}