/* The front page's Editorial band (inc/editorial.php): the Analysis band's layout (analysis.css), in black, with the
   paper's orange for the pen. Here only what differs. */

.tt-an--ed {
	--tt-ed-pen: #ff4200;
	margin-top: 0;
	background-image:
		linear-gradient(90deg, #000 0%, transparent 70%),
		linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px),
		linear-gradient(100deg, #000 0%, #0d0d0d 45%, #1f1f1f 100%);
}
/* straight after the Analysis band: a hairline between the two, not a gap */
.tt-an + .tt-an--ed, .tt-an + style + .tt-an--ed { border-top: 1px solid rgba(255, 255, 255, .14); }

.tt-an--ed .tt-an__motif .sm-pen__nib { fill: var(--tt-ed-pen); }
.tt-an--ed .tt-an__n { color: var(--tt-ed-pen); }
.tt-an--ed .tt-an__quote { border-inline-start-color: var(--tt-ed-pen); }
.tt-an--ed .tt-an__fill { background: var(--tt-ed-pen); }
.tt-an--ed .tt-an__item:hover .tt-an__big { color: var(--tt-ed-pen); -webkit-text-stroke-color: var(--tt-ed-pen); }

/* the pen, once, as the band comes into view: the nib runs across and the picture is written open behind it */
.tt-an--ed .tt-an__blade { inset-inline-start: 0; margin-inline-start: 0; background: var(--tt-ed-pen); }
.tt-an--ed.tt-an--armed .tt-an__pic .tt-picture { clip-path: inset(0 100% 0 0); }
[dir="rtl"] .tt-an--ed.tt-an--armed .tt-an__pic .tt-picture { clip-path: inset(0 0 0 100%); }
.tt-an--ed.tt-an--armed.is-in .tt-an__pic .tt-picture { clip-path: inset(0 0 0 0); transition: clip-path .7s cubic-bezier(.7, 0, .2, 1) .1s; }
.tt-an--ed.tt-an--armed.is-in .tt-an__blade { animation: tt-ed-pen .8s cubic-bezier(.7, 0, .2, 1) .1s both; }
@keyframes tt-ed-pen { 0% { opacity: 1; inset-inline-start: 0; } 87% { opacity: 1; inset-inline-start: calc(100% - 3px); } 100% { opacity: 0; inset-inline-start: calc(100% - 3px); } }

@media (prefers-reduced-motion: reduce) {
	.tt-an--ed.tt-an--armed .tt-an__pic .tt-picture { clip-path: none; }
}