/*
 *  template16 - style.css
 *
 *  Accura personal vCard, Home Style 1, rebuilt 2026-09-17 for the markup in
 *  index.php. The theme's sheets sat on Bootstrap 3, a dozen jQuery plugins
 *  and image files this design does not ship, so the look is restated here
 *  in plain CSS with the theme's own measurements: Oswald headings, Raleway
 *  text, Carrois Gothic SC labels, the orange #ef9a00, a black menu bar under
 *  a 400px intro circle, and panels that are black at 90% on the right half.
 */

/*
    THE GOOGLE FONTS IMPORT WAS REMOVED, 2026-09-19.

    It fetched Oswald, Raleway and Carrois Gothic SC, none of them chosen
    by the account, and the browser went on to download all four files.
    Measured: Carrois rendered on 11 elements and Oswald on 32.

    The families below are two custom properties now, set from the
    account's own faces in css/override.php, which is the same mechanism
    this file already uses for --t16-accent.

    STILL OUTSTANDING and not fixable here: 00_template_cdnjs carries a
    row for this design pointing at a second Oswald stylesheet. That is a
    production row and the template loop is not authorized to delete it.
*/

html,
body {
	margin: 0;
	background: #111;
}

#t16 {
	--t16-accent: #ef9a00;
	position: relative;
	min-height: 100vh;
	color: #818181;
	font-family: var(--t16-face-body, Arial, sans-serif);
	font-size: 15px;
	line-height: 1.75;
	overflow: hidden;
}

#t16 *,
#t16 *::before,
#t16 *::after {
	box-sizing: border-box;
}

#t16 a {
	color: inherit;
	text-decoration: none;
}

#t16 h1, #t16 h2, #t16 h3 {
	font-family: var(--t16-face-head, Arial, sans-serif);
	font-weight: 400;
	letter-spacing: normal;
	text-transform: uppercase;
}

.t16-bg,
.t16-pattern {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

.t16-bg {
	background: #1a1a1a center top / cover no-repeat;
}

.t16-pattern {
	background: rgba(0, 0, 0, .35) repeating-linear-gradient(0deg, rgba(0, 0, 0, .25) 0, rgba(0, 0, 0, .25) 1px, transparent 1px, transparent 3px);
	transition: background-color .8s;
}

.t16-at-home .t16-pattern {
	background-color: rgba(0, 0, 0, .55);
}

/* ------------------------------------------------------------ menu bar */

.t16-nav {
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	z-index: 40;
	background: #000;
	transition: top .6s, height .6s;
}

.t16-at-home .t16-nav {
	top: 73vh;
}

.t16-nav-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1170px;
	height: 84px;
	margin: 0 auto;
	padding: 0 15px;
	transition: height .6s;
}

.t16-at-home .t16-nav-inner {
	height: 108px;
}

.t16-logo {
	flex: 0 1 auto;
	min-width: 0;
	max-width: 40%;
	overflow: hidden;
	color: #666 !important;
	font: 400 30px/1 var(--t16-face-head, Arial, sans-serif);
	text-transform: uppercase;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.t16-logo span {
	display: inline-block;
	padding: 3px 6px;
	border-radius: 3px;
	background: var(--t16-accent);
	color: #fff;
}

.t16-menu ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	margin: 0;
	padding: 0;
	list-style: none;
}

.t16-menu a {
	display: block;
	padding: 8px 16px;
	color: #bbb !important;
	font: 400 15px var(--t16-face-head, Arial, sans-serif);
	text-transform: uppercase;
	white-space: nowrap;
	transition: color .2s;
}

.t16-menu a:hover,
.t16-menu a.selected {
	color: var(--t16-accent) !important;
}

.t16-toggle {
	display: none;
	flex: 0 0 auto;
	width: 46px;
	height: 40px;
	padding: 9px 10px;
	border: 0;
	border-radius: 3px;
	background: var(--t16-accent);
	cursor: pointer;
}

.t16-toggle span {
	display: block;
	height: 3px;
	margin: 0 0 4px;
	background: #fff;
}

/* ------------------------------------------------------------ panels */

.t16-track {
	position: relative;
	display: flex;
	height: 100vh;
	transition: transform 1.2s cubic-bezier(.87, 0, .13, 1);
}

.t16-panel {
	position: relative;
	flex: 0 0 100vw;
	height: 100vh;
}

.t16-content {
	position: absolute;
	top: 84px;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, .9);
}

.t16-half .t16-content {
	width: 50%;
}

.t16-full .t16-content {
	left: 0;
}

.t16-scroll {
	height: 100%;
	overflow-y: auto;
	padding: 60px 50px 60px;
	scrollbar-width: thin;
	scrollbar-color: var(--t16-accent) #222;
}

.t16-scroll::-webkit-scrollbar {
	width: 10px;
}

.t16-scroll::-webkit-scrollbar-track {
	background: #222;
}

.t16-scroll::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background: var(--t16-accent);
}

.t16-full .t16-scroll {
	padding-right: calc((100% - 1140px) / 2);
	padding-left: calc((100% - 1140px) / 2);
}

#t16 .t16-scroll h1 {
	margin: 0 0 20px;
	color: #f9f9f9;
	font-size: 30px;
	line-height: 1.3;
}

#t16 .t16-scroll h2 {
	margin: 40px 0 25px;
	color: #eaeaea;
	font-size: 22px;
	line-height: 1.3;
}

#t16 .t16-scroll h3 {
	margin: 0 0 15px;
	color: #eaeaea;
	font-size: 16px;
	line-height: 1.6;
}

#t16 .lead {
	margin: 0 0 40px;
	font-size: 16px;
	letter-spacing: .5px;
}

.heading-icons {
	margin-left: 8px;
	color: #333;
	font-size: 30px;
	vertical-align: middle;
}

/* ------------------------------------------------------------ home */

.t16-home-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 20px;
	max-width: 1170px;
	margin: 0 auto;
	padding: 30px 15px 0;
}

.t16-social {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.t16-social a {
	display: block;
	border-radius: 50%;
	background: #5c5c5c;
	color: #fff !important;
	text-align: center;
	transition: background .2s;
}

.t16-social a:hover {
	background: var(--t16-accent);
}

.t16-social-big a {
	width: 55px;
	height: 55px;
	font-size: 24px;
	line-height: 55px;
}

.t16-social-small {
	margin: 0 0 40px;
}

.t16-social-small a {
	width: 50px;
	height: 50px;
	background: #2a2a2a;
	font-size: 20px;
	line-height: 50px;
}

.t16-home-contact {
	min-width: 0;
	color: #fff;
	font-family: var(--t16-face-head, Arial, sans-serif);
	text-align: right;
	overflow-wrap: anywhere;
}

.t16-home-contact .home_address {
	font-size: 22px;
	line-height: 1.4;
}

.t16-home-contact .call {
	font-size: 42px;
	line-height: 1.2;
}

.t16-home-contact .fa {
	margin-right: 6px;
	font-size: .8em;
}

.t16-circle {
	position: absolute;
	/*  47vh is where the demo puts it. Measured at 1440x1000: the demo's
	    circle sits at y270 and ours sat at y185, so it hung 85px high and
	    left 157px of empty ground above the menu bar where the demo
	    leaves 72.  */
	top: 47vh;
	left: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 400px;
	height: 400px;
	border: 12px solid #0a0a0a;
	border-radius: 50%;
	background: rgba(239, 154, 0, .9);
	text-align: center;
	transform: translate(-50%, -50%);
}

.t16-circle-inner {
	width: 330px;
	color: #222;
}

.t16-circle .home_title {
	font-size: 36px;
	font-weight: 300;
	line-height: 1.4;
}

#t16 .t16-circle h1 {
	margin: 4px 0 6px;
	color: #fff;
	font-family: var(--t16-face-body, Arial, sans-serif);
	font-size: 36px;
	font-weight: 800;
	line-height: 1.15;
	overflow-wrap: anywhere;
}

/*  The demo runs every line in the circle at one size: fitText() divides the
    circle by ten, so all five of its lines measure 37.6px at 1440. Ours ran
    the first two at 36 and the tagline at 22, which read as a caption under
    the name rather than as the third line of one piece of type.  */
.t16-circle .home_title2 {
	font-size: 33px;
	font-weight: 600;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

#t16 .t16-long-name h1 {
	font-size: 22px;
}

.t16-long-name .home_title {
	font-size: 26px;
}

.t16-long-title .home_title2 {
	font-size: 15px;
}

.t16-ribbons {
	position: absolute;
	right: 0;
	bottom: 20px;
	display: flex;
	gap: 4px;
}

.t16-ribbon {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	border-radius: 3px 0 0 3px;
	background: var(--t16-accent);
	color: #fff !important;
	font: 16px/1.1 var(--t16-face-head, Arial, sans-serif);
	text-transform: uppercase;
	transform: rotate(-2deg);
	transition: transform .2s;
}

.t16-ribbon:hover {
	transform: rotate(0deg) translateY(-3px);
}

.t16-ribbon .fa {
	color: #a86c00;
	font-size: 26px;
}

.t16-ribbon small {
	display: block;
	font-size: 12px;
}

/* ------------------------------------------------------------ about */

.t16-cols {
	display: flex;
	gap: 30px;
}

.t16-col {
	flex: 1 1 0;
	min-width: 0;
}

.t16-bio,
.t16-bio p {
	font-size: 15px;
	line-height: 1.75;
	letter-spacing: .5px;
}

.t16-bio span,
.t16-bio font {
	font-size: inherit !important;
	font-family: inherit !important;
	color: inherit !important;
}

.t16-info {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 14px 18px;
	margin: 0;
}

.t16-info dt,
.t16-info dd {
	margin: 0;
}

.t16-info dd {
	color: #999;
	overflow-wrap: anywhere;
}

.input-box {
	display: inline-block;
	padding: 3px 7px;
	border-radius: 2px;
	background: var(--t16-accent);
	color: #fff;
	font: 13px/1.6 var(--t16-face-head, Arial, sans-serif);
	letter-spacing: 1px;
	text-transform: uppercase;
	white-space: nowrap;
}

.t16-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 40px;
}

#t16 .t16-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 16px 30px;
	border: 0;
	border-radius: 2px;
	background: var(--t16-accent) linear-gradient(110deg, transparent 75%, rgba(255, 255, 255, .2) 75%);
	color: #fff;
	font: 14px var(--t16-face-head, Arial, sans-serif);
	letter-spacing: 2px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .2s;
}

#t16 .t16-btn:hover {
	background-color: #d48900;
}

#t16 .t16-btn .fa {
	color: #a86c00;
	font-size: 20px;
}

/* ------------------------------------------------------------ skills */

.t16-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.t16-tags li {
	padding: 6px 14px;
	border: 2px solid var(--t16-accent);
	border-radius: 2px;
	color: #eaeaea;
	font: 15px var(--t16-face-head, Arial, sans-serif);
	text-transform: uppercase;
}

/* ------------------------------------------------------------ resume */

.t16-timeline {
	margin: 0;
	padding: 0;
	list-style: none;
}

.t16-timeline li {
	position: relative;
	display: flex;
	gap: 20px;
	padding-bottom: 30px;
}

.t16-timeline li::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 131px;
	width: 8px;
	background: var(--t16-accent);
}

.t16-timeline li:last-child::before {
	bottom: auto;
	height: 26px;
}

.t16-when {
	flex: 0 0 90px;
	padding-top: 12px;
	color: #eaeaea;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	text-align: right;
}

.t16-dot {
	position: relative;
	flex: 0 0 52px;
	width: 52px;
	height: 52px;
	border: 5px solid #f5b43d;
	border-radius: 50%;
	background: var(--t16-accent);
	color: #fff;
	font-size: 16px;
	line-height: 42px;
	text-align: center;
}

.t16-box {
	flex: 1 1 auto;
	min-width: 0;
	padding: 20px 24px;
	border-radius: 2px;
	background: #151515;
}

#t16 .t16-box h3 {
	margin: 0 0 6px;
	font-size: 18px;
	overflow-wrap: anywhere;
}

.t16-sub {
	font-size: 14px;
	letter-spacing: 1px;
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ portfolio */

#t16-portfolio {
	text-align: center;
}

#t16 #t16-portfolio > h2 {
	margin: 0 0 30px;
	color: #f9f9f9;
	font-size: 30px;
}

#t16-portfolio .wfa-gallery-filter {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
}

#t16-portfolio .wfa-gallery-filter a {
	display: block;
	padding: 8px 28px;
	border-radius: 2px;
	background: #6f6f6f;
	color: #fff;
	font: 500 14px var(--t16-face-head, Arial, sans-serif);
	text-transform: uppercase;
}

#t16-portfolio .wfa-gallery-filter a:hover,
#t16-portfolio .wfa-gallery-filter a.current {
	background: var(--t16-accent);
}

#t16 .lightGallery.row {
	display: flex;
	flex-wrap: wrap;
	height: auto !important;
	margin: 0 -8px;
	text-align: left;
}

#t16 .lightGallery.row > div {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	float: none;
	width: 25%;
	padding: 8px;
	transform: none !important;
}

#t16 .lightGallery.row > div > img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* ------------------------------------------------------------ press */

#t16 .t16-extras .wfa-resume-extras {
	width: auto;
	margin: 0;
	padding: 0;
	background: none;
	color: #999;
}

#t16 .t16-extras .section + .section {
	margin-top: 40px;
}

#t16 .t16-extras h2,
#t16 .t16-reviews h2 {
	margin: 0 0 25px;
	color: #f9f9f9;
	font-size: 30px;
}

#t16 .t16-extras .press-list {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

#t16 .t16-extras .press-list > h2 {
	flex: 0 0 100%;
	margin-bottom: 0;
}

#t16 .t16-extras .press-item {
	flex: 0 1 220px;
	padding: 20px;
	background: #151515;
}

#t16 .t16-extras .press-item img {
	width: auto;
	max-width: 100%;
	max-height: 100px;
	margin-bottom: 12px;
	object-fit: contain;
}

#t16 .t16-extras h3 {
	margin: 0 0 6px;
	font-size: 16px;
}

#t16 .t16-extras a {
	color: var(--t16-accent);
}

.t16-reviews {
	margin-top: 40px;
}

.t16-reviews blockquote {
	margin: 0 0 24px;
	padding: 18px 22px;
	border-left: 5px solid var(--t16-accent);
	background: #151515;
}

.t16-reviews cite {
	display: block;
	margin-top: 8px;
	color: #eaeaea;
	font: normal 15px var(--t16-face-head, Arial, sans-serif);
	text-transform: uppercase;
}

/* ------------------------------------------------------------ contact */

.t16-contact-list {
	margin: 0 0 30px;
	padding: 0;
	list-style: none;
}

.t16-contact-list li {
	display: flex;
	gap: 16px;
	margin-bottom: 14px;
	color: #eaeaea;
	font: 16px/1.6 var(--t16-face-head, Arial, sans-serif);
	text-transform: uppercase;
	overflow-wrap: anywhere;
}

.t16-contact-list .fa {
	flex: 0 0 30px;
	color: var(--t16-accent);
	font-size: 26px;
	text-align: center;
}

.t16-contact-list span {
	min-width: 0;
}

.t16-contact-list a {
	text-transform: none;
}

#t16 .t16-form label {
	display: none;
}

#t16 .t16-form input[type="text"],
#t16 .t16-form textarea {
	display: block;
	width: 100%;
	margin: 0 0 12px;
	padding: 12px 14px;
	border: 1px solid #2a2a2a;
	border-radius: 2px;
	background: #151515;
	color: #eaeaea;
	font: 15px var(--t16-face-body, Arial, sans-serif);
}

#t16 .t16-form textarea {
	height: 130px;
	resize: vertical;
}

#t16 .t16-form input:focus,
#t16 .t16-form textarea:focus {
	border-color: var(--t16-accent);
	outline: 0;
}

#t16 .t16-form .t16-send {
	margin-top: 10px;
}

/* ------------------------------------------------------------ footer */

.t16-copy {
	position: fixed;
	bottom: 6px;
	left: 10px;
	z-index: 30;
	color: #eaeaea;
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	pointer-events: none;
}

/* ------------------------------------------------------------ narrow */

@media (max-width: 1199px) {
	.t16-menu a {
		padding: 8px 10px;
	}
}

@media (max-width: 991px) {
	#t16 {
		overflow: visible;
	}

	.t16-nav,
	.t16-at-home .t16-nav {
		position: sticky;
		top: 0;
	}

	.t16-nav-inner,
	.t16-at-home .t16-nav-inner {
		flex-wrap: wrap;
		height: auto;
		min-height: 64px;
		padding: 12px 16px;
	}

	.t16-logo {
		flex: 1 1 0;
		max-width: none;
		font-size: 24px;
	}

	.t16-toggle {
		display: block;
		margin-left: 12px;
	}

	.t16-menu {
		flex: 0 0 100%;
		max-height: 0;
		overflow: hidden;
		transition: max-height .4s;
	}

	.t16-menu-open .t16-menu {
		max-height: 480px;
	}

	.t16-menu ul {
		display: block;
		padding-top: 10px;
	}

	.t16-menu a {
		padding: 12px 0;
		border-top: 1px solid #222;
		font-size: 17px;
	}

	.t16-track {
		display: block;
		height: auto;
		transform: none !important;
	}

	.t16-panel {
		height: auto;
	}

	#home {
		display: flex;
		flex-direction: column;
		min-height: calc(100vh - 64px);
		padding-bottom: 30px;
	}

	.t16-home-top {
		flex-direction: column;
		align-items: center;
		width: 100%;
		padding-top: 24px;
	}

	.t16-home-contact {
		text-align: center;
	}

	.t16-home-contact .call {
		font-size: 30px;
	}

	.t16-home-contact .home_address {
		font-size: 18px;
	}

	.t16-circle {
		position: relative;
		top: auto;
		left: auto;
		width: 320px;
		height: 320px;
		margin: 40px auto;
		transform: none;
	}

	.t16-circle-inner {
		width: 260px;
	}

	.t16-circle .home_title {
		font-size: 28px;
	}

	#t16 .t16-circle h1 {
		font-size: 28px;
	}

	.t16-circle .home_title2 {
		font-size: 18px;
	}

	#t16 .t16-long-name h1 {
		font-size: 19px;
	}

	.t16-long-name .home_title {
		font-size: 22px;
	}

	.t16-long-title .home_title2 {
		font-size: 13px;
	}

	.t16-ribbons {
		position: static;
		flex-wrap: wrap;
		justify-content: center;
		gap: 10px;
		padding: 0 16px;
	}

	.t16-ribbon {
		border-radius: 3px;
	}

	.t16-content,
	.t16-half .t16-content {
		position: static;
		width: auto;
	}

	.t16-scroll,
	.t16-full .t16-scroll {
		height: auto;
		overflow: visible;
		padding: 50px 16px;
	}

	.t16-cols {
		display: block;
	}

	.t16-col + .t16-col {
		margin-top: 30px;
	}

	#t16 .lightGallery.row > div {
		width: 50%;
	}

	.t16-copy {
		position: static;
		padding: 16px;
		background: #000;
		text-align: center;
	}
}

@media (max-width: 520px) {
	#t16 .lightGallery.row > div {
		width: 100%;
	}

	.t16-timeline li {
		gap: 12px;
	}

	.t16-timeline li::before {
		left: 22px;
	}

	.t16-when {
		display: none;
	}

	.t16-dot {
		flex-basis: 52px;
	}

	.t16-box {
		padding: 16px;
	}

	.t16-info {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
	}

	.t16-info dd {
		margin-bottom: 10px;
	}

	#t16 .t16-btn {
		padding: 14px 20px;
	}
}

/* ------------------------------------------------- t16 settings pass, 2026-09-17 */

/*  The social row carries the account's icon set now, so each circle is a
    frame around its artwork rather than a letter from an icon font. */
.t16-social a img {
	display: block;
	width: 100%;
	height: 100%;
	padding: 22%;
	object-fit: contain;
}

/*  The line Accura closes its masthead with, bottom left at 9px. Kept at
    12px here: 9px is below what this review will pass anywhere. */
.t16-copyright {
	position: absolute;
	left: 24px;
	bottom: 14px;
	z-index: 3;
	color: rgba(255, 255, 255, .75);
	font-size: 12px;
	letter-spacing: .5px;
	text-transform: uppercase;
}

/*  THE CALLS TO ACTION ARE THE DEMO'S RIBBONS, 2026-09-22.

    The user: "ctas look incorrect - if you can make it look like the ribbons
    do it". Accura's #specialmenu, read from its own stylesheet: three tags
    floated at the bottom right, each overlapping the one before by 10px and
    tilted 3 degrees, one way then the other; each a 150 by 60 card in the
    accent at .85 with a 6px radius and a heavy shadow; a pointer hanging off
    its lower edge; the glyph at 35px in rgba(0,0,0,.2); the label uppercase
    at 15px. Hovering straightens a tag, brings it to the front and grows it.

    What they were: one flat bar in the accent holding all three, with no
    tilt, no shadow, no pointer and nothing between them, so they read as a
    single strip rather than three things to press.

    The accent at .85 and the ink that reads on it come from override.php,
    which knows the account color, as --t16-ribbon and --t16-ribbon-ink.
    Wider than the demo's 150 when the label needs it, and allowed onto a
    second line past 11em, which is how the demo sets its two-line labels. */
/*  The demo's corner exactly: bottom 0, right 0, with the tags' own 20px
    under them making room for the pointer. The rule this replaced had the
    row 20px up from the corner and 20px in, on top of that margin. */
@media (min-width: 992px) {
	.t16-ribbons {
		right: 0;
		bottom: 0;
	}
}

.t16-ribbons #ghostButtons {
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-end;
	align-items: flex-end;
	gap: 0;
	margin: 0;
	padding: 0;
}

.t16-ribbons .ghostButton {
	position: relative;
	z-index: 1;
	margin: 0 0 20px -10px;
	padding: 0;
	border: 0;
	background: none;
	transform: rotate(-3deg);
	transition: transform .6s;
}

.t16-ribbons .ghostButton:first-child {
	margin-left: 0;
}

.t16-ribbons .ghostButton:nth-child(even) {
	transform: rotate(3deg);
}

.t16-ribbons .ghostButton:hover {
	z-index: 2;
	transform: rotate(0deg);
}

.t16-ribbons .ghostButton a {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0;
	min-width: 150px;
	min-height: 60px;
	padding: 0 16px 0 0;
	border-radius: 6px;
	background: var(--t16-ribbon, var(--t16-accent));
	box-shadow: 0 0 18px 0 rgba(0, 0, 0, .75);
	color: var(--t16-ribbon-ink, #fff);
	font: 400 15px/1.15 var(--t16-face-head, Arial, sans-serif);
	letter-spacing: .5px;
	text-transform: uppercase;
	text-align: left;
	text-decoration: none;
	transition: min-height .6s, font-size .6s;
}

/*  The ink needs the id. Earlier in this file #t16 a { color: inherit }
    carries an id, which outranks two classes, so the labels inherited the
    body gray, rgb(129,129,129), on the accent. Measured, not guessed: it was
    the only color rule that matched the anchor and won. */
#t16 .t16-ribbons .ghostButton a {
	color: var(--t16-ribbon-ink, #fff);
}

.t16-ribbons .ghostButton a:hover {
	min-height: 65px;
	font-size: 17px;
}

/*  The pointer. Same color as the card, so the card and its tail read as one
    shape; the demo's drop shadow on it is what lifts it off the page. */
.t16-ribbons .ghostButton a::before {
	content: "";
	position: absolute;
	right: 45%;
	top: 99%;
	width: 0;
	height: 0;
	border-top: 17px solid var(--t16-ribbon, var(--t16-accent));
	border-right: 13px solid transparent;
	border-bottom: 13px solid transparent;
	filter: drop-shadow(4px 2px 4px rgba(0, 0, 0, .2));
}

.t16-ribbons .ghostButton a strong {
	max-width: 11em;
	color: inherit;
	font-weight: inherit;
}

/*  The demo's glyph is a font character in rgba(0,0,0,.2), recessed into the
    card. Ours is the account's icon-set artwork, a white mark, so
    brightness(0) makes it black and the opacity puts it at that strength. */
.t16-ribbons .ghostButton img,
.t16-ribbons .ghostButton svg,
.t16-ribbons .ghostButton .cta-artwork {
	width: 35px;
	height: 35px;
	flex: 0 0 35px;
	margin: 0 10px;
	filter: brightness(0);
	opacity: .2;
}

/*  Below 991 the ribbons leave the corner and sit in the flow under the
    circle (see the 991 block above), so they may wrap onto a second row.
    The tilt and the overlap stay, which is what makes them ribbons. */
@media (max-width: 991px) {
	.t16-ribbons #ghostButtons {
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 14px;
	}
}

/*  The demo's own phone rule: at 480 and below the label goes and each tag is
    a 90 by 40 card holding its glyph. The anchor keeps its aria-label, so
    the words are still there for anything that reads them. */
@media (max-width: 480px), (max-width: 768px) and (max-height: 480px) {
	.t16-ribbons .ghostButton a {
		min-width: 90px;
		min-height: 40px;
		justify-content: center;
		padding: 0;
	}

	.t16-ribbons .ghostButton a:hover {
		min-height: 43px;
	}

	.t16-ribbons .ghostButton a strong {
		display: none;
	}

	.t16-ribbons .ghostButton img,
	.t16-ribbons .ghostButton svg,
	.t16-ribbons .ghostButton .cta-artwork {
		width: 24px;
		height: 24px;
		flex-basis: 24px;
	}

	.t16-ribbons .ghostButton a::before {
		border-top-width: 10px;
	}
}

/*  With no overlay chosen the photograph is bare, so the type that sits
    straight on it carries a shadow instead of a wash: the address and
    number at the top, and the copyright line. The circle, the menu bar and
    the ribbons have grounds of their own. */
.t16-no-overlay .t16-home-contact,
.t16-no-overlay .t16-copyright {
	text-shadow: 0 1px 3px rgba(0, 0, 0, .7), 0 0 12px rgba(0, 0, 0, .45);
}

/*  THE WORKAROUND THAT STOOD HERE IS GONE, 2026-09-20.

    It said "the icon set brings its own background, so the circle behind
    it goes", made .t16-social a transparent whenever it held an image and
    took the padding off that image so it filled the circle. That was true
    of Color Block, the platform default, which is a full-bleed color
    square. The result was four circles in four brand colors where the demo
    has one quiet wash: orange SoundCloud, yellow IMDb, blue Facebook,
    green Vimeo.

    00_templates.icon_set_id is 4 for this design now, Knockout, white
    marks with no tile of their own, so there is no background to defer to
    and the rule above is correct as written: the circle is the frame and
    the mark sits inside it at 22 per cent padding.

    Measured on the demo at 3x: a 55px circle filled rgba(255,255,255,.35)
    over its dark ground, which composites to almost exactly the #5c5c5c
    this design already paints, with a white glyph inside.  */