/* Logotype plates and internal-tool framing (TASK-DP-025).
   The plate is the Design's catalog-face / gallery logo-frame surface
   (the approved Design's .catalog-face, .gallery .logo-frame rules)
   tinted with the brand teal, so a hero-less entry shows its lockup on a
   brand-tinted plate in its tile and its detail. One plate per page scheme,
   switched exactly like the tile faces. The internal-tool frame is plain words
   in the existing meta and eyebrow treatments: no colour, badge or grouping of
   its own. */

/* UI round 9: plates are Podium's neutral preview plate (.dv-page gradient,
   r10, teal hairline) over a 6% brand-teal ground, so logotype faces keep a
   brand breath without the old teal slab. */
.work-index__list .project-tile__face,
.idea-lab-surface .concept-card .concept-card__face {
  background: color-mix(in srgb, var(--teal) 6%, transparent);
  background-image: var(--plate);
}

.work-detail .identity-plate,
.concept-surface .identity-plate {
  display: grid;
  max-width: 76rem;
  margin: 0 0 2.75rem;
}

/* The plate spans the column like a gallery plate (the UA figure margin made
   it 40px narrower on each side). */
.work-detail .identity-plate > figure,
.concept-surface .identity-plate > figure { margin: 0; }

.work-detail .media-frame[data-plate-role="logotype"],
.concept-surface .media-frame[data-plate-role="logotype"] {
  display: grid;
  min-height: 16rem;
  place-items: center;
  padding: clamp(2rem, 6vw, 4.5rem);
  background: color-mix(in srgb, var(--teal) 6%, transparent);
  background-image: var(--plate);
}

.work-detail .media-frame[data-plate-role="logotype"] img,
.concept-surface .media-frame[data-plate-role="logotype"] img {
  width: min(24rem, 84%);
  height: auto;
  object-fit: contain;
}

.work-detail .media-frame[data-plate-role="logotype"] .logotype-plate {
  color: var(--text-hi);
  font: 600 clamp(1.35rem, 3vw, 2.4rem)/1 "Instrument Sans", Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -.035em;
  text-align: center;
}

/* The concept identity frame's typed plate (augment BX-08 identity-frame.css
   section 8): the approved h2 step inside the 8rem frame face envelope. */
.concept-surface .media-frame[data-plate-role="logotype"] .logotype-plate {
  color: var(--text-hi);
  font: 600 clamp(2rem, 4vw, 3.8rem)/1 "Instrument Sans", Inter, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -.035em;
  text-align: center;
}

/* One plate per scheme: the dark plate by default, the light plate under the light scheme. */
.work-detail .media-frame[data-plate-scheme="light"],
.concept-surface .media-frame[data-plate-scheme="light"] { display: none; }
:root[data-theme="light"] .work-detail .media-frame[data-plate-scheme="dark"],
body[data-scheme="light"] .work-detail .media-frame[data-plate-scheme="dark"],
:root[data-theme="light"] .concept-surface .media-frame[data-plate-scheme="dark"],
body[data-scheme="light"] .concept-surface .media-frame[data-plate-scheme="dark"] { display: none; }
:root[data-theme="light"] .work-detail .media-frame[data-plate-scheme="light"],
body[data-scheme="light"] .work-detail .media-frame[data-plate-scheme="light"],
:root[data-theme="light"] .concept-surface .media-frame[data-plate-scheme="light"],
body[data-scheme="light"] .concept-surface .media-frame[data-plate-scheme="light"] { display: grid; }

/* The concept's cleared hero (dormant branch, BX-08): it covers the whole
   plate; the plate is its loading ground, with no spinner or motion. */
.concept-surface .media-frame[data-plate-role="hero"] img[data-media-role="hero"] {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--radius-plate) - 4px);
}

.project-tile .project-tile__frame { margin: -.6rem 0 0; }