/*
 *  template76 - style.css
 *
 *  This file has been zero bytes since the design was imported. _head.php
 *  loads css/style.css and nothing else from a design's folder, so template76
 *  has never had a layout on any account. The catalog's own preview image for
 *  it is a screenshot of unstyled markup.
 *
 *  The theme it came from is a WooCommerce music template, and what survived
 *  of it is css/override.php: several hundred accent-color rules for a shop
 *  demo - ul.products, .album-box, .concerts, .pricing-table - with no base
 *  sheet under them. That base sheet is not in this repository and not in
 *  ~/_sources, and the markup it described was a cart and a store, not an
 *  actor's website.
 *
 *  So this is written to go with the markup in index.php. It keeps the
 *  theme's own idea: a dark stage with a full-bleed photograph.
 */

@import url("https://fonts.googleapis.com/css?family=Changa:400,500,600,700,800|Roboto:400,500,700&display=swap");

.tm-shell {
	/*  The one place this design's own ground is named. .tm-stage-brush
	    reads it, because the torn edge has to be painted in whatever the
	    banner is torn away to reveal. */
	--t76-ground: #101114;
	background: var(--t76-ground);
	color: #d8dade;
	font-size: 16px;
	line-height: 1.7;
}

.tm-inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 30px;
	box-sizing: border-box;
}

.tm-shell a {
	color: #e8300c;
}

.tm-shell a:hover {
	color: #ff5c3a;
	text-decoration: none;
}

/* Header */

.tm-header {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 60;
	padding: 18px 0;
	background: rgba(16, 17, 20, 0.92);
}

.tm-header .tm-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.tm-brand {
	font-size: 22px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #fff !important;
}

.tm-burger {
	display: none;
	padding: 0;
	background: none;
	border: 0;
}

.tm-burger span {
	display: block;
	width: 26px;
	height: 2px;
	margin: 5px 0;
	background: #fff;
}

.tm-nav ul {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tm-nav li {
	margin-left: 26px;
}

.tm-nav a {
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #d8dade !important;
}

.tm-nav a:hover {
	color: #e8300c !important;
}

/* Stage */

.tm-stage {
	background-size: cover;
	background-position: center 20%;
	background-repeat: no-repeat;
}

.tm-stage-inner {
	display: flex;
	/*  The demo holds its banner content a quarter of the way above the
	    middle of an 840px band. This banner is a whole window, so the same
	    proportion is a centred block lifted by a fifth of it. */
	align-items: center;
	/*  Milando fixes its banner at 840. Holding that, capped so it can never
	    be taller than the window, is what keeps the torn edge at the foot of
	    it on screen: at 100vh nobody saw it without scrolling. */
	min-height: min(840px, 94vh);
	padding-bottom: 14vh;
}

/*  The panel is this flex container's only item, and the lines inside it are
    out of flow, so without this it sizes itself to the widest thing left,
    which is the row of buttons. A name then wraps at about 300px and breaks
    in the middle of a word. */
.tm-stage-inner > .tm-inner {
	width: 100%;
}

.tm-stage h1 {
	margin: 0 0 12px;
	font-size: 64px;
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: #fff;
}

.tm-lead {
	margin: 0 0 6px;
	font-size: 20px;
	color: #f0f1f3;
}

.tm-meta {
	margin: 0 0 28px;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #9aa0a8;
}

/* Buttons */

.tm-btn {
	display: inline-block;
	margin: 0 12px 12px 0;
	padding: 13px 30px;
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff !important;
	background: #e8300c;
	border: 2px solid #e8300c;
}

.tm-btn:hover {
	color: #fff !important;
	background: #c4270a;
	border-color: #c4270a;
}

.tm-btn-ghost {
	background: none;
	border-color: rgba(255, 255, 255, 0.55);
}

.tm-btn-ghost:hover {
	background: rgba(255, 255, 255, 0.1);
	border-color: #fff;
}

.tm-btn-sm {
	padding: 9px 20px;
	font-size: 12px;
}

/* Sections */

.tm-section {
	padding: 90px 0;
}

.tm-section-alt {
	background: #15171b;
}

.tm-title {
	position: relative;
	margin: 0 0 46px;
	padding-bottom: 16px;
	font-size: 34px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
}

.tm-title:after {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 60px;
	height: 3px;
	background: #e8300c;
	content: "";
}

.tm-sub {
	margin: 28px 0 14px;
	font-size: 15px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
}

.tm-muted {
	color: #9aa0a8;
}

/* Columns */

.tm-cols {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -15px;
}

.tm-col-4,
.tm-col-6,
.tm-col-8 {
	padding: 0 15px;
	box-sizing: border-box;
}

.tm-col-4 { width: 33.3333%; }
.tm-col-6 { width: 50%; }
.tm-col-8 { width: 66.6666%; }

.tm-portrait {
	width: 100%;
	height: auto;
	margin-bottom: 20px;
}

/* Lists */

.tm-tags {
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

.tm-tags li {
	display: inline-block;
	margin: 0 8px 8px 0;
	padding: 6px 15px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 18px;
	font-size: 14px;
}

.tm-list {
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
}

.tm-list li {
	margin: 0 0 20px;
	padding-left: 18px;
	border-left: 2px solid rgba(255, 255, 255, 0.16);
}

.tm-list li strong {
	display: block;
	color: #fff;
}

.tm-list li span {
	font-size: 14px;
	color: #9aa0a8;
}

.tm-card {
	margin-bottom: 30px;
}

.tm-card img {
	width: 100%;
	height: auto;
	margin-bottom: 14px;
}

.tm-card h4 {
	margin: 0 0 6px;
	font-size: 18px;
	color: #fff;
}

.tm-quote {
	margin: 0 0 26px;
	padding: 0 0 0 20px;
	border-left: 3px solid #e8300c;
}

.tm-quote cite {
	display: block;
	margin-top: 10px;
	font-style: normal;
	color: #9aa0a8;
}

.tm-social {
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.tm-social li {
	display: inline-block;
	margin-right: 16px;
	font-size: 19px;
}

/* Form */

.tm-form input[type="text"],
.tm-form input[type="email"],
.tm-form input[type="tel"],
.tm-form textarea {
	width: 100%;
	margin-bottom: 14px;
	padding: 13px 16px;
	color: #f0f1f3;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.16);
	box-sizing: border-box;
}

.tm-form textarea {
	min-height: 150px;
}

/* Footer */

.tm-footer {
	padding: 26px 0;
	background: #0b0c0e;
	text-align: center;
	color: #6f757d;
}

.tm-footer p {
	margin: 0;
}

@media (max-width: 991px) {
	.tm-col-4,
	.tm-col-6,
	.tm-col-8 {
		width: 100%;
	}

	.tm-burger {
		display: block;
	}

	.tm-nav {
		display: none;
		flex-basis: 100%;
		padding-top: 16px;
	}

	.tm-header.is-open .tm-nav {
		display: block;
	}

	.tm-nav ul {
		flex-direction: column;
	}

	.tm-nav li {
		margin: 0 0 12px;
	}

	.tm-stage h1 {
		font-size: 38px;
	}
}

/*
 *  Milando, the theme's home page (Milando-Files/index.html, Home Player V1).
 *
 *  The package turned up in _source on 2026-09-15, so the layout above now
 *  takes the demo's look: Changa for the display type and Roboto for text, a
 *  hero photograph washed red with a torn black edge along its foot, the
 *  dashed ticket button, and centered red section titles over a thin rule and
 *  a short bar. The torn edge is an inline SVG: the theme's brushbg.png is an
 *  image file, and only php files deploy from a design folder.
 */

.tm-shell {
	font-family: "Roboto", Helvetica, Arial, sans-serif;
}

.tm-brand,
.tm-nav a,
.tm-stage h1,
.tm-frame,
.tm-title,
.tm-sub,
.tm-btn,
.tm-card h4 {
	font-family: "Changa", "Roboto", Helvetica, Arial, sans-serif;
}

.tm-brand {
	font-weight: 800;
	letter-spacing: 0.06em;
}

.tm-nav a {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.06em;
}

.tm-stage {
	position: relative;
	background-color: #f60038;
	background-blend-mode: multiply;
}

/*  No photograph: the theme's dark red ground, no blown up placeholder.  */

.tm-stage-bare {
	background-image: radial-gradient(circle at 50% 30%, #6d0019 0%, #2a0009 55%, #101114 100%);
	background-color: transparent;
}

.tm-stage-inner {
	position: relative;
	align-items: center;
	justify-content: center;
	padding: 120px 0 140px;
	text-align: center;
}

.tm-stage h1 {
	margin: 0 0 18px;
	font-size: clamp(44px, 7.5vw, 112px);
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	overflow-wrap: break-word;
	text-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

.tm-lead {
	font-family: "Roboto", Helvetica, Arial, sans-serif;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #fff;
}

/*  Milando sets the line under the type at 30px, uppercase and letter
    spaced, with a rule running out from it on each side that fades away at
    both ends. The rules are drawn in override.php, in the account color. */
.tm-meta {
	position: relative;
	display: inline-block;
	margin-top: 26px;
	padding: 6px 0;
	font-family: "Roboto", Helvetica, Arial, sans-serif;
	font-size: 30px;
	font-weight: 700;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #fff;
}

.tm-meta:before,
.tm-meta:after {
	position: absolute;
	left: 50%;
	width: 36%;
	height: 1px;
	transform: translateX(-50%);
	content: "";
}

.tm-meta:before {
	top: 0;
}

.tm-meta:after {
	bottom: 0;
}

.tm-btn {
	font-weight: 600;
}

/*
 *  On the hero the buttons stand on the red wash, where a solid red button
 *  almost disappears. The theme puts a dashed outline button there, so both
 *  take an outline: the first in white, the second in the theme's orange.
 */

.tm-stage .tm-btn {
	margin: 22px 8px 0;
	background: rgba(16, 17, 20, 0.35);
	border: 2px dashed #fff;
	color: #fff !important;
}

.tm-stage .tm-btn:hover {
	background: #fff;
	border-color: #fff;
	color: #101114 !important;
}

.tm-stage .tm-btn-ghost {
	background: rgba(16, 17, 20, 0.35);
	border-color: #ff6c00;
	color: #ff6c00 !important;
}

.tm-stage .tm-btn-ghost:hover {
	background: #ff6c00;
	border-color: #ff6c00;
	color: #101114 !important;
}

.tm-btn-ghost {
	border: 2px dashed #ff6c00;
	color: #ff6c00 !important;
}

.tm-btn-ghost:hover {
	background: none;
	border-color: #fff;
	color: #fff !important;
}

.tm-title {
	display: block;
	margin: 0 auto 60px;
	padding-bottom: 25px;
	font-size: 40px;
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0;
	text-align: center;
	color: #f60038;
}

.tm-title:before,
.tm-title:after {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	content: "";
}

.tm-title:before {
	bottom: 0;
	width: 70px;
	height: 1px;
	background: #f60038;
}

.tm-title:after {
	bottom: -1px;
	width: 30px;
	height: 3px;
}

.tm-sub {
	font-size: 17px;
	font-weight: 700;
	letter-spacing: 0.08em;
}

/*
 *  Awards and education, in the design's own type.
 *
 *  The platform's markup arrives with its own idea of these: the award sits in
 *  a fixed box with laurel artwork drawn around it, and every entry runs the
 *  full page width. Here they are two plain columns under centered red
 *  headings, reading like the rest of the page.
 */

#extras .wfa-resume-extras {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -15px;
}

#extras .wfa-resume-extras > .section {
	width: 50%;
	padding: 0 15px;
	box-sizing: border-box;
	min-height: 0;
	background: none;
	text-align: left;
}

#extras .wfa-resume-extras h2 {
	position: relative;
	margin: 0 0 32px;
	padding-bottom: 18px;
	font-family: "Changa", "Roboto", Helvetica, Arial, sans-serif;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-align: center;
	color: #f60038;
}

#extras .wfa-resume-extras h2:after {
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 30px;
	height: 3px;
	margin-left: -15px;
	background: #f60038;
	content: "";
}

#extras .wfa-resume-extras .value-name {
	display: block;
	margin: 0 0 20px;
	padding-left: 18px;
	border-left: 2px solid rgba(255, 255, 255, 0.16);
}

#extras .wfa-resume-extras .value {
	display: block;
	font-weight: 700;
	color: #fff;
}

#extras .wfa-resume-extras .name {
	display: block;
	font-size: 14px;
	color: #9aa0a8;
}

/*  The laurel artwork and its fixed box belong to other designs.  */

#extras .wfa-resume-extras .award {
	width: auto;
	height: auto;
	padding: 0 !important;
	background: none;
	text-align: left;
}

#extras .wfa-resume-extras .award:before,
#extras .wfa-resume-extras .award:after {
	display: none;
}

#extras .wfa-resume-extras .award-details {
	position: static;
	transform: none;
}

@media (max-width: 767px) {
	#extras .wfa-resume-extras > .section {
		width: 100%;
		margin-bottom: 36px;
	}
}

/*
 *  The gallery grid.
 *
 *  templates/template00/gallery.php gives every tile Bootstrap column classes
 *  (col-xs-12 col-sm-6 col-md-3, the count following the account's own choice).
 *  This design loads no Bootstrap and defaults.css defines none of them, so
 *  every tile fell to full width and one photograph filled the screen. The
 *  widths are declared here, which is also what the demo does with its tile
 *  rows. Written against the class names rather than a fixed column count, so
 *  an account that picks two or six columns gets what it picked.
 */

#gallery .template00-gallery .row {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -8px;
}

#gallery .template00-gallery .row > [class*="col-"] {
	width: 100%;
	padding: 0 8px 16px;
	box-sizing: border-box;
}

#gallery .template00-gallery .grid-sizer {
	display: none;
}

#gallery .template00-gallery img {
	display: block;
	width: 100%;
	height: auto;
}

@media (min-width: 768px) {
	#gallery .template00-gallery .row > .col-sm-2 { width: 16.6666%; }
	#gallery .template00-gallery .row > .col-sm-3 { width: 25%; }
	#gallery .template00-gallery .row > .col-sm-4 { width: 33.3333%; }
	#gallery .template00-gallery .row > .col-sm-6 { width: 50%; }
}

@media (min-width: 992px) {
	#gallery .template00-gallery .row > .col-md-2 { width: 16.6666%; }
	#gallery .template00-gallery .row > .col-md-3 { width: 25%; }
	#gallery .template00-gallery .row > .col-md-4 { width: 33.3333%; }
	#gallery .template00-gallery .row > .col-md-6 { width: 50%; }
	#gallery .template00-gallery .row > .col-md-12 { width: 100%; }
}

/*  The filter row above the tiles, in the theme's small capitals.  */

#gallery .wfa-gallery-filter {
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
	text-align: center;
}

#gallery .wfa-gallery-filter li {
	display: inline-block;
	margin: 0 6px 8px;
}

#gallery .wfa-gallery-filter li a {
	display: block;
	padding: 7px 18px;
	border: 1px solid rgba(255, 255, 255, 0.22);
	font-family: "Changa", "Roboto", Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #d8dade !important;
}

#gallery .wfa-gallery-filter li.current a,
#gallery .wfa-gallery-filter li a:hover {
	border-color: #f60038;
	color: #fff !important;
	background: #f60038;
}

@media (max-width: 991px) {
	.tm-stage-inner {
		padding: 110px 0 120px;
	}

	.tm-stage-brush {
		height: 70px;
	}

	.tm-lead {
		font-size: 18px;
		letter-spacing: 2px;
	}

	.tm-title {
		font-size: 30px;
		margin-bottom: 44px;
	}
}

/* --- t76 home hero, 2026-09-20 --------------------------------------------
 *
 *  Milando's banner-five, which is the demo's home page. Four layers, of
 *  which this port had none: a stage photograph with the accent multiplied
 *  into it, a cut-out over it that follows the pointer, a scrim, and the
 *  theme's own torn brush edge at the bottom.
 *
 *  The demo fixes the banner at 840px. Ours is a full window because an
 *  actor's name and their buttons are the whole point of the page, and 840
 *  on a laptop leaves the About heading half visible under it.
 */

.tm-stage {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.tm-stage-ground,
.tm-stage-para,
.tm-stage-scrim {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	pointer-events: none;
}

/*  The photograph, softened. The demo's own is a long lens stage shot with
    almost nothing in focus, and a headshot is the opposite of that, so the
    blur is what makes the two read alike. Scaled up because a blur feathers
    an element's own edges and would otherwise show the page through them. */
.tm-stage-ground {
	background-position: center 20%;
	background-repeat: no-repeat;
	background-size: cover;
	background-blend-mode: multiply;
	/*  Heavy on purpose. Both layers are photographs of the same person on
	    an actor's site, so a ground you can still read faces in puts that
	    face on the page twice. Milando's own ground is a stage shot in which
	    nothing is legible, and that is the job this blur does. */
	filter: blur(16px) saturate(1.05) brightness(1.45);
	transform: scale(1.06);
}

.tm-stage-para {
	overflow: hidden;
}

/*  The same photograph, sharp and whole rather than cropped to fill, lifted
    off the ground with screen and dissolved at its edges so no rectangle
    shows. The demo's layer is a cut-out, which is what the mask stands in
    for. js/custom.php moves it with the pointer.

    Left of centre and standing on the floor of the banner, which is where
    the demo puts its guitarist, so the big type crosses it rather than
    sitting on the middle of a face. */
.tm-stage-figure {
	position: absolute;
	top: 12%;
	bottom: 0;
	left: 3%;
	width: 44%;
	display: block;
	background-position: center 12%;
	background-repeat: no-repeat;
	/*  cover, not contain. Fitted, a portrait photograph in a tall element
	    stands in the lower half of it and its own top edge draws a straight
	    line across the banner. The mask is what shapes this layer. */
	background-size: cover;
	mix-blend-mode: screen;
	opacity: 0.85;
	-webkit-mask-image: radial-gradient(ellipse 58% 60% at 50% 46%, #000 34%, rgba(0, 0, 0, 0) 76%);
	mask-image: radial-gradient(ellipse 58% 60% at 50% 46%, #000 34%, rgba(0, 0, 0, 0) 76%);
	transform: translate3d(0, 0, 0);
	transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
	will-change: transform;
}

/*  One element, so the member's slideshow overlay has something to restyle.
    The default is the design's own. */
.tm-stage-scrim {
	background: linear-gradient(to bottom, rgba(16, 17, 20, 0.42) 0%, rgba(16, 17, 20, 0.12) 38%, rgba(16, 17, 20, 0.85) 100%);
}

/*  The theme's brushbg.png, as a mask rather than an image: see index.php. */
.tm-stage-brush {
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	z-index: 2;
	/*  280 of an 840 band on the demo. */
	height: 210px;
	pointer-events: none;
	-webkit-mask-image: url("https://www.webforactors.com/cld/iadb/image/upload/q_auto,f_auto/site/templates/t76/brushbg.png");
	mask-image: url("https://www.webforactors.com/cld/iadb/image/upload/q_auto,f_auto/site/templates/t76/brushbg.png");
	-webkit-mask-position: bottom center;
	mask-position: bottom center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	background: var(--t76-ground, #101114);
}

.tm-stage-inner {
	z-index: 1;
}

/*  THE LINES THAT CYCLE.
 *
 *  One at a time in the same place, so they stack and the block keeps a
 *  fixed height rather than jumping as a longer line arrives. A design with
 *  one line only never gets tm-frames-2 and stays in normal flow.
 *
 *  Each line carries its own animation-delay, five seconds apart, and the
 *  loop is five seconds per line. There is no prefers-reduced-motion rule
 *  here on purpose: this animation IS the banner, and switching it off
 *  leaves a page whose name is invisible for fifteen of every twenty
 *  seconds.
 */
.tm-frames {
	position: relative;
	/*  180px on a 1440 window is the demo's own figure, and it is what
	    makes this banner the banner rather than a photograph with a name
	    on it. */
	font-size: clamp(46px, 12.5vw, 180px);
	line-height: 0.92;
}

/*  The lines are taken out of flow, so the block has to hold its own height
    or the buttons under it jump as each line arrives. 1.05em of the size set
    just above, which is why that size is on the container. */
.tm-frames-2,
.tm-frames-3,
.tm-frames-4 {
	min-height: 1.05em;
	margin-bottom: 18px;
}

.tm-frames-2 .tm-frame,
.tm-frames-3 .tm-frame,
.tm-frames-4 .tm-frame {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	margin: 0;
	opacity: 0;
	animation-iteration-count: infinite;
	animation-timing-function: cubic-bezier(0, 1.09, 1, 1);
}

.tm-frames-2 .tm-frame { animation-duration: 10s; animation-name: t76-frame-2; }
.tm-frames-3 .tm-frame { animation-duration: 15s; animation-name: t76-frame-3; }
.tm-frames-4 .tm-frame { animation-duration: 20s; animation-name: t76-frame-4; }

/*  The demo's own numbers for four lines, 0 / 5 / 20 / 30 of a twenty second
    loop, scaled to the shorter loops. The overlap between one line going and
    the next arriving is the demo's too. */
@keyframes t76-frame-2 {
	0%   { opacity: 0; transform: scale(1.3); }
	10%  { opacity: 1; transform: scale(1); }
	40%  { opacity: 1; transform: scale(1); }
	60%  { opacity: 0; transform: scale(0); }
	100% { opacity: 0; transform: scale(0); }
}

@keyframes t76-frame-3 {
	0%     { opacity: 0; transform: scale(1.3); }
	6.67%  { opacity: 1; transform: scale(1); }
	26.67% { opacity: 1; transform: scale(1); }
	40%    { opacity: 0; transform: scale(0); }
	100%   { opacity: 0; transform: scale(0); }
}

@keyframes t76-frame-4 {
	0%   { opacity: 0; transform: scale(1.3); }
	5%   { opacity: 1; transform: scale(1); }
	20%  { opacity: 1; transform: scale(1); }
	30%  { opacity: 0; transform: scale(0); }
	100% { opacity: 0; transform: scale(0); }
}

.tm-frame {
	overflow-wrap: break-word;
}

/*  A cycled line is not the h1 and needs the h1's type. */
.tm-frames .tm-frame {
	font-size: 1em;
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
}

@media (max-width: 767px) {
	/*  The demo keeps its cut-out at this width and shortens the band to
	    about 400, so the whole composition including the torn edge is on
	    screen at once. Ours does the same. */
	.tm-stage-inner {
		min-height: min(520px, 76vh);
		padding-bottom: 8vh;
	}

	.tm-stage-figure {
		top: 16%;
		left: 0;
		width: 62%;
	}

	.tm-stage-brush {
		height: 90px;
	}

	.tm-meta {
		margin-top: 16px;
		font-size: 18px;
		letter-spacing: 2px;
	}

	.tm-meta:before,
	.tm-meta:after {
		width: 60%;
	}
}