/* On This Day TV — one visual contract.
   Story art is exact-event, rights-cleared data from the published edition.
   Fixed period illustrations are decorative context and never source evidence. */

:root{
  --scene-y200:none;
  --scene-y75:none;
  --scene-head-left:none;
  --scene-head-right:none;
  --scene-then:none;
  --scene-changed:none;
  --scene-now:none;
  --scene-community-left:none;
  --scene-community-right:none;
  --scene-showcase-1:var(--scene-vignette-y200);
  --scene-showcase-2:var(--scene-vignette-y100);
  --scene-showcase-3:var(--scene-vignette-y75);
  --scene-showcase-4:var(--scene-vignette-community);
  --scene-recipe:none;
}

.era-200 .paper-illustration,
.era-76 .paper-illustration{
  position:relative!important;
  overflow:hidden!important;
  height:116px!important;
  min-height:116px!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:cover!important;
  border:1px solid #a98e64!important;
  box-shadow:inset 0 0 18px rgba(67,46,24,.16)!important;
}
.era-200 .paper-illustration{background-image:var(--scene-y200)!important}
.era-76 .paper-illustration{background-image:var(--scene-y75)!important}
.era-side .paper-illustration[data-has-scene="false"]{display:none!important}
.era-200 .paper-illustration .period-visual-frame,
.era-76 .paper-illustration .period-visual-frame,
.era-200 .paper-illustration .period-visual-fallback,
.era-76 .paper-illustration .period-visual-fallback{display:none!important}
.era-200 .paper-illustration::after,
.era-76 .paper-illustration::after{display:none!important}

.history-board{position:relative;isolation:isolate}
.history-board>*{position:relative;z-index:2}
.history-board::before,.history-board::after{
  content:"";
  position:absolute;
  z-index:1;
  top:10px;
  width:180px;
  height:108px;
  opacity:.68;
  pointer-events:none;
  background-repeat:no-repeat;
  background-size:cover;
  filter:sepia(.12) saturate(.84) contrast(1.01);
}
.history-board::before{left:18px;background-image:var(--scene-head-left);background-position:center}
.history-board::after{right:18px;background-image:var(--scene-head-right);background-position:center}

.era-layout{align-items:stretch!important}
.era-side{display:flex!important;flex-direction:column!important;position:relative}
.era-side[hidden]{display:none!important}
.era-side .era-body{flex:0 0 auto}
.era-side::after{
  content:none;
  display:none;
  flex:1 1 auto;
  min-height:90px;
  margin:6px 9px 9px;
  border-top:1px solid #d1bea0;
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  opacity:.88;
  filter:sepia(.12) saturate(.82) contrast(1.01);
}
.era-side[data-has-story-scene="true"]::after{display:none}
.era-200::after{background-image:none}
.era-76::after{background-image:none}

.then-now-visual.then{background-image:var(--scene-then)!important}
.then-now-visual.changed{background-image:var(--scene-changed)!important}
.then-now-visual.now{background-image:var(--scene-now)!important}
.then-now-visual{
  filter:sepia(.1) saturate(.84) contrast(1.01)!important;
  background-size:cover!important;
  background-position:center!important;
}
.then-now-visual[data-has-scene="false"]{display:none!important}

.community-home{position:relative;isolation:isolate}
.community-home>*{position:relative;z-index:2}
.community-home::before,.community-home::after{
  content:none;
  display:none;
  position:absolute;
  z-index:1;
  top:14px;
  width:136px;
  height:80px;
  opacity:.46;
  pointer-events:none;
  background-repeat:no-repeat;
  background-size:cover;
  filter:sepia(.12) saturate(.8) contrast(1.01);
}
.community-home::before{left:20px;background-image:var(--scene-community-left);background-position:left center}
.community-home::after{right:20px;background-image:var(--scene-community-right);background-position:right center}

.graphic-showcase .showcase-art.frontpage{background-image:var(--scene-showcase-1)!important}
.graphic-showcase .showcase-art.archive{background-image:var(--scene-showcase-2)!important}
.graphic-showcase .showcase-art.map{background-image:var(--scene-showcase-3)!important}
.graphic-showcase .showcase-art.voices{background-image:var(--scene-showcase-4)!important}
.graphic-showcase .showcase-art{
  filter:sepia(.1) saturate(.84) contrast(1.01)!important;
  background-size:cover!important;
  background-position:center!important;
}
.graphic-showcase[data-checkpointed-vignettes="true"]{display:block!important}
.graphic-showcase[data-checkpointed-vignettes="true"] .showcase-card,
.graphic-showcase[data-checkpointed-vignettes="true"] .showcase-art{display:block!important}

.recipe-illustration-banner{
  background-image:var(--scene-recipe)!important;
  background-position:center 55%!important;
  background-size:cover!important;
}
.recipe-illustration-banner[data-has-scene="false"]{display:none!important}

@media(max-width:930px){
  .history-board::before,.history-board::after{width:122px;height:80px;opacity:.46}
  .community-home::before,.community-home::after{width:90px;height:60px;opacity:.3}
}
@media(max-width:700px){
  .history-board::before,.history-board::after,
  .community-home::before,.community-home::after{display:none}
}