/* r55, step 1: the title introduction only. Registration and all other surfaces keep their existing styles. */
.ufc-drawer[data-kind="story"] {
  --story-ink: #30202b;
  --story-muted: #705764;
  --story-rule: #eadce4;
  --story-paper: #f6edf2;
  animation: none;
}
.ufc-drawer[data-kind="story"][data-stage="funding"] {
  --story-muted: #8b523b;
  --story-rule: #dcb59f;
  --story-paper: #e9d2c3;
}
.ufc-drawer[data-kind="story"] .ufc-drawer-header { padding-bottom: 12px; }
.ufc-drawer[data-kind="story"] .ufc-close { width: 44px; height: 44px; }
.ufc-drawer[data-kind="story"] .ufc-drawer-content { padding-top: 24px; padding-bottom: 28px; }
.ufc-story-view { color: var(--story-ink); }
.ufc-story-hero { display: grid; grid-template-columns: 132px minmax(0,1fr); gap: 22px; align-items: center; }
.ufc-story-poster { aspect-ratio: 2/3; border-radius: 12px; overflow: hidden; background: var(--story-paper); box-shadow: 0 4px 8px #30202b1c; }
.ufc-story-poster > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ufc-story-poster-pending { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; height: 100%; padding: 16px; text-align: center; color: var(--story-ink); }
.ufc-story-poster-pending b { font-size: 42px; line-height: 1; }
.ufc-story-poster-pending span { font-size: 13px; line-height: 1.5; }
.ufc-story-identity { min-width: 0; }
.ufc-story-stage { display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 8px; background: #f4ecf2; color: #533e4b; font-size: 13px; line-height: 1.4; font-weight: 600; }
.ufc-story-stage .ufc-stage-art { width: 22px; height: 22px; flex: none; }
.ufc-drawer[data-kind="story"][data-stage="funding"] .ufc-story-stage { background: #e6f3e9; color: #276749; }
.ufc-drawer[data-kind="story"][data-stage="production"] .ufc-story-stage { background: #f4e9d4; color: #7b581c; }
.ufc-story-identity h3 { margin: 12px 0 8px; font: 700 25px/1.18 var(--sans); letter-spacing: -.02em; overflow-wrap: anywhere; text-wrap: balance; }
.ufc-story-genres { margin: 0; color: var(--story-muted); font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.ufc-story-platforms { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; margin-top: 17px; font-size: 13px; line-height: 1.5; }
.ufc-story-platform-label { color: var(--story-muted); }
.ufc-drawer .ufc-story-platforms .ufc-sheet-platforms { justify-content: flex-start; }
.ufc-drawer .ufc-story-platforms .ufc-sheet-platforms > span { white-space: normal; font-size: 13px; line-height: 1.4; }
.ufc-story-facts { display: grid; grid-template-columns: minmax(0,.85fr) minmax(0,.85fr) minmax(0,1.3fr); gap: 14px; padding: 17px 0; margin: 24px 0 0; border-top: 1px solid var(--story-rule); border-bottom: 1px solid var(--story-rule); }
.ufc-story-facts > div { min-width: 0; }
.ufc-story-facts dt { font-size: 13px; line-height: 1.5; color: var(--story-muted); margin-bottom: 5px; }
.ufc-story-facts dd { font-size: 14px; line-height: 1.55; font-weight: 600; margin: 0; overflow-wrap: anywhere; }
.ufc-story-synopsis { padding-top: 24px; }
.ufc-story-view section > h3 { margin: 0 0 10px; font: 700 16px/1.5 var(--sans); }
.ufc-drawer .ufc-story-view .ufc-full-story { margin: 0; font-size: 15px; line-height: 1.85; text-wrap: pretty; }
.ufc-story-team { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--story-rule); }
.ufc-drawer .ufc-story-view .ufc-sheet-mystery { color: var(--story-muted); font-size: 14px; line-height: 1.75; }
.ufc-drawer .ufc-story-view .ufc-sheet-team li:last-child { border-bottom: 0; padding-bottom: 0; }
/* Native dialog transitions preserve focus, scroll position and the existing browser-back handling. */
@supports (transition-behavior: allow-discrete) {
  .ufc-drawer[data-kind="story"] { opacity: 0; transform: translateY(28px); transition: opacity 180ms ease-out, transform 220ms cubic-bezier(.22,1,.36,1), display 220ms allow-discrete, overlay 220ms allow-discrete; }
  .ufc-drawer[data-kind="story"][open] { opacity: 1; transform: none; }
  .ufc-drawer[data-kind="story"]::backdrop { background: #26162200; transition: background 180ms ease-out, display 220ms allow-discrete, overlay 220ms allow-discrete; }
  .ufc-drawer[data-kind="story"][open]::backdrop { background: #261622a6; }
  @starting-style {
    .ufc-drawer[data-kind="story"][open] { opacity: 0; transform: translateY(28px); }
    .ufc-drawer[data-kind="story"][open]::backdrop { background: #26162200; }
  }
}
@media (min-width:768px) {
  .ufc-drawer[data-kind="story"] .ufc-drawer-content { padding-inline: 26px; padding-top: 28px; }
  .ufc-story-hero { grid-template-columns: 142px minmax(0,1fr); }
  @supports (transition-behavior: allow-discrete) {
    .ufc-drawer[data-kind="story"] { transform: translateX(28px); }
    .ufc-drawer[data-kind="story"][open] { transform: none; }
    @starting-style { .ufc-drawer[data-kind="story"][open] { transform: translateX(28px); } }
  }
}
@media (max-width:389px) {
  .ufc-story-hero { grid-template-columns: 110px minmax(0,1fr); gap: 16px; }
  .ufc-story-identity h3 { font-size: 22px; }
  .ufc-story-facts { gap: 10px; }
}
@media (prefers-reduced-motion:reduce) {
  .ufc-drawer[data-kind="story"],.ufc-drawer[data-kind="story"]::backdrop { transition: none; }
}