/*
 *  template17 - style.css
 *
 *  "Profession" CV by PixFlow, rebuilt 2026-09-17 for the markup in
 *  index.php. The theme's own sheet styled a page whose panels were sized by
 *  script (niceScroll, carouFredSel, a menu that animated a margin) and drew
 *  its icons from image files this design does not ship, so the layout is
 *  restated here in plain CSS with the theme's measurements: a 980px column,
 *  a 510px row of panels that scrolls sideways, Open Sans, and the theme's
 *  orange (#ffae00), dark (#232323) and page gray (#eee).
 */

/*
    THE OPEN SANS IMPORT WAS REMOVED, 2026-09-19.

    It fetched a face the account did not choose and the browser went on
    to download two weights of it. Measured: it rendered on two visible
    elements. The family below is a custom property now, set from the
    account's own subheading face in css/override.php, which is the same
    mechanism this file already uses for --t17-accent.

    The Mrs Saint Delafield import on the next line STAYS. It draws one
    element, .signiture, the actor's name as a handwritten signature
    under the card. That is a feature of this design rather than a
    substitute for a choice the account made, and no account face is a
    script face.
*/
@import url('https://fonts.googleapis.com/css?family=Mrs+Saint+Delafield&display=swap');

body {
	margin: 0;
	background: #eee;
}

#t17 {
	--t17-accent: #ffae00;
	--t17-dark: #232323;
	min-height: 100vh;
	padding-bottom: 40px;
	background: #eee;
	color: #5c5c5c;
	font-family: var(--t17-face-head, Arial, sans-serif);
	font-size: 14px;
	line-height: 1.6;
}

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

#t17 h1, #t17 h2, #t17 h3, #t17 h4, #t17 h5, #t17 h6 {
	font-family: var(--t17-face-head, Arial, sans-serif);
	letter-spacing: normal;
	text-transform: none;
}

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

#t17 img {
	max-width: 100%;
}

#t17 .clearfix::after {
	content: '';
	display: table;
	clear: both;
}

/* ------------------------------------------------------------------ header */

.t17-head {
	padding: 50px 0 0;
}

.t17-bar {
	position: relative;
	display: flex;
	align-items: center;
	width: 980px;
	max-width: 100%;
	height: 88px;
	margin: 0 auto;
	padding-right: 60px;
}

.header-titles {
	display: flex;
	align-items: center;
	min-width: 0;
	transition: opacity .3s;
}

.header-titles .name-title {
	font-size: 40px;
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: 1px;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.header-titles .title-separator {
	margin: 0 12px;
	font-size: 44px;
	font-weight: 300;
	line-height: 1;
}

.header-titles .job-title {
	font-size: 20px;
	font-weight: 300;
	letter-spacing: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.t17-toggle {
	position: absolute;
	top: 22px;
	right: 0;
	width: 43px;
	height: 43px;
	padding: 0;
	border: 0;
	background: var(--t17-accent);
	cursor: pointer;
}

.t17-toggle span {
	position: absolute;
	top: 20px;
	left: 13px;
	width: 17px;
	height: 3px;
	background: #232323;
	transition: transform .3s;
}

.t17-toggle span + span {
	transform: rotate(90deg);
}

.t17-open .t17-toggle span + span {
	transform: rotate(0deg);
}

.t17-menu {
	position: absolute;
	top: 22px;
	right: 43px;
	height: 43px;
	overflow: hidden;
	pointer-events: none;
}

.t17-menu ul {
	display: flex;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	background: #fff;
	transform: translateX(105%);
	transition: transform .4s;
}

.t17-open .t17-menu {
	pointer-events: auto;
}

.t17-open .t17-menu ul {
	transform: translateX(0);
}

.t17-open .header-titles {
	opacity: 0;
}

#t17 .t17-menu a {
	display: block;
	padding: 0 18px;
	line-height: 43px;
	font-size: 14px;
	color: #5c5c5c;
	white-space: nowrap;
}

#t17 .t17-menu a:hover,
#t17 .t17-menu a.active-menu {
	background: var(--t17-dark);
	color: #fff;
}

/* ------------------------------------------------------------ panel row */

.mainpart {
	display: flex;
	align-items: stretch;
	height: 510px;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.mainpart::-webkit-scrollbar {
	display: none;
}

.t17-spacer {
	flex: 0 0 calc((100% - 980px) / 2);
	min-width: 20px;
}

.mainpart > .page {
	position: relative;
	flex: 0 0 980px;
	height: 510px;
	margin-right: 2px;
	overflow: hidden;
}

.page-scroll {
	height: 100%;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 0, 0, .35) transparent;
}

.page-scroll::-webkit-scrollbar {
	width: 6px;
}

.page-scroll::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, .35);
}

#resume .page-scroll::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, .35);
}

#resume .page-scroll {
	scrollbar-color: rgba(255, 255, 255, .35) transparent;
}

#t17 h2 {
	margin: 0;
	color: #000;
	font-size: 40px;
	font-weight: 300;
	line-height: 1.2;
}

/* ------------------------------------------------------------ About */

#home {
	display: flex;
	background: var(--t17-accent);
}

#home .mypic {
	flex: 0 0 480px;
	height: 100%;
}

#home .mypic img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	filter: grayscale(100%);
}

#home .about-text {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	height: 100%;
	color: #111;
}

/*  The bio is the only thing that scrolls. min-height 0 is what lets a flex
    child shrink below its content and actually scroll; without it the box
    grows to fit and takes the foot off the bottom of the card.  */
#home .about-text .page-scroll {
	flex: 1 1 auto;
	min-height: 0;
	height: auto;
	padding: 50px 36px 10px;
}

#home .about-text.no-pic .page-scroll {
	padding: 50px 110px 10px;
}

/*  The signature and the calls to action close the card, as they do on the
    demo, and they stay put while the bio moves behind them.  */
#home .t17-card-foot {
	flex: 0 0 auto;
	padding: 0 36px 30px;
}

#home .about-text.no-pic .t17-card-foot {
	padding: 0 110px 30px;
}

#t17 .about-title {
	margin: 0 0 18px;
	font-size: 30px;
	font-weight: 400;
	line-height: 1.2;
	text-transform: uppercase;
	color: #111;
	overflow-wrap: anywhere;
}

.about-title .category {
	display: block;
	margin-top: 4px;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-transform: none;
}

.t17-union {
	margin: 0 0 14px;
	font-weight: 600;
}

.about-paragraph,
.about-paragraph p {
	font-size: 14px;
	line-height: 1.7;
}

.about-paragraph span,
.about-paragraph font {
	font-size: inherit !important;
	font-family: inherit !important;
	color: inherit !important;
}

.signiture {
	margin-top: 22px;
	font-family: 'Mrs Saint Delafield', cursive;
	font-size: 44px;
	line-height: 1.3;
	color: #111;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ------------------------------------------------------------ Portfolio */

#portfolio {
	background: #fff;
}

#portfolio .page-scroll {
	padding: 22px 45px 30px;
}

#t17-portfolio {
	position: relative;
}

#t17-portfolio > h2 {
	margin: 0 0 20px;
	padding-right: 360px;
}

#t17-portfolio .wfa-gallery-filter {
	position: absolute;
	top: 8px;
	right: 0;
	max-width: 520px;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: right;
}

#t17-portfolio .wfa-gallery-filter li {
	display: inline-block;
	margin: 0 0 4px;
}

#t17-portfolio .wfa-gallery-filter a {
	display: block;
	padding: 6px 10px;
	color: #5c5c5c;
	font-size: 13px;
}

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

#t17 .lightGallery.row {
	display: flex;
	flex-wrap: wrap;
	height: auto !important;
	margin: 0 -6px;
}

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

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

#t17 .lightGallery .tile-label {
	font-size: 12px;
}

/* ------------------------------------------------------------ Resume */

#resume {
	background: var(--t17-dark);
	color: #fff;
}

#resume .page-scroll {
	padding: 0 35px;
}

.t17-block {
	display: flex;
	padding: 45px 0;
}

.t17-block + .t17-block {
	border-top: 1px solid #555;
}

.chart-title {
	flex: 0 0 235px;
	padding-right: 20px;
}

#t17 .chart-title h2 {
	color: #fff;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.15;
	overflow-wrap: anywhere;
}

.t17-block-body {
	flex: 1 1 auto;
	min-width: 0;
}

.t17-skills {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.t17-skills li {
	padding: 7px 18px;
	border: 3px solid var(--t17-accent);
	border-radius: 30px;
	font-size: 14px;
	font-weight: 700;
}

.t17-skills li.lang {
	border-color: #555;
}

.experiences {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.experiences .exp {
	padding-left: 11px;
	border-left: 3px solid #fff;
	overflow-wrap: anywhere;
}

.experiences .work-title {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
}

.experiences .period {
	font-size: 14px;
	line-height: 1.45;
	color: #ddd;
}

/* ------------------------------------------------------------ Press */

#press {
	background: #fff;
}

#press .page-scroll {
	padding: 22px 45px 30px;
}

#t17 .t17-extras .wfa-resume-extras {
	width: auto;
	margin: 0;
	padding: 0;
	background: none;
	color: #5c5c5c;
}

#t17 .t17-extras .section + .section {
	margin-top: 35px;
}

#t17 .t17-extras h2,
#t17 .t17-reviews h2 {
	margin: 0 0 20px;
}

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

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

#t17 .t17-extras .press-item {
	flex: 0 1 200px;
}

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

#t17 .t17-extras h3 {
	margin: 0 0 4px;
	color: #000;
	font-size: 15px;
	font-weight: 700;
}

.t17-reviews {
	margin-top: 35px;
}

.t17-reviews blockquote {
	margin: 0 0 22px;
	padding: 4px 0 4px 16px;
	border-left: 3px solid var(--t17-accent);
}

.t17-reviews cite {
	display: block;
	margin-top: 6px;
	color: #000;
	font-style: normal;
	font-weight: 700;
}

/* ------------------------------------------------------------ Contact */

#contact {
	display: flex;
	background: var(--t17-accent);
	color: #111;
}

#contact .contact-info {
	flex: 0 0 435px;
	height: 100%;
}

#contact .contact-info.wide {
	flex: 1 1 auto;
}

#contact .contact-info .page-scroll {
	padding: 20px 35px 30px;
}

.contact-title {
	float: left;
}

.socials {
	float: right;
	margin: 6px 0 0;
	padding: 0;
	list-style: none;
}

.socials li {
	float: left;
	margin-left: 3px;
}

.socials a {
	display: block;
	width: 32px;
	height: 32px;
	background: #000;
	color: #fff !important;
	font-size: 17px;
	line-height: 32px;
	text-align: center;
}

.socials a:hover {
	background: #fff;
	color: #000 !important;
}

.contact-add {
	margin: 30px 0 30px;
	padding-left: 16px;
	border-left: 2px solid #111;
	font-size: 14px;
	line-height: 25px;
	overflow-wrap: anywhere;
}

.contact-add strong {
	font-weight: 700;
}

#t17 .t17-form {
	margin: 0;
}

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

#t17 .t17-form input[type="text"],
#t17 .t17-form textarea {
	display: block;
	width: 100%;
	margin: 0 0 5px;
	padding: 9px 10px;
	border: 0;
	border-radius: 0;
	background: rgba(0, 0, 0, .32);
	color: #fff;
	font: 14px var(--t17-face-head, Arial, sans-serif);
}

#t17 .t17-form textarea {
	height: 92px;
	resize: vertical;
}

#t17 .t17-form ::placeholder {
	color: #ffe3a6;
	opacity: 1;
}

#t17 .t17-form .t17-send {
	margin-top: 25px;
	padding: 6px 17px;
	border: 0;
	background: #000;
	color: #fff;
	font: 600 13px var(--t17-face-head, Arial, sans-serif);
	cursor: pointer;
}

#t17 .t17-form .t17-send:hover {
	background: #fff;
	color: #000;
}

.t17-side {
	flex: 1 1 auto;
	background-position: center top;
	background-size: cover;
	filter: grayscale(100%);
}

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

.t17-foot {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
	width: 980px;
	max-width: 100%;
	margin: 20px auto 0;
	padding: 0 20px;
}

.t17-foot .footer-border {
	flex: 0 1 200px;
	border-top: 1px solid #ccc;
}

.t17-foot .copyright {
	font-size: 13px;
	text-align: center;
}

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

@media (max-width: 999px) {
	.t17-head {
		padding: 0;
		background: #eee;
	}

	/* the fixed event bar sits over the top 46px */
	body:has(#event) .t17-head {
		padding-top: 47px;
	}

	.t17-bar {
		width: 100%;
		height: 67px;
		padding: 0 82px 0 16px;
	}

	.header-titles {
		display: block;
	}

	.header-titles .name-title {
		font-size: 24px;
		font-weight: 700;
	}

	.header-titles .title-separator {
		display: none;
	}

	.header-titles .job-title {
		font-size: 13px;
		letter-spacing: 0;
	}

	.t17-open .header-titles {
		opacity: 1;
	}

	.t17-toggle {
		top: 0;
		width: 67px;
		height: 67px;
	}

	.t17-toggle span {
		top: 32px;
		left: 22px;
		width: 23px;
	}

	.t17-menu {
		top: 67px;
		right: 0;
		left: 0;
		z-index: 50;
		height: auto;
		max-height: 0;
		transition: max-height .35s;
	}

	.t17-open .t17-menu {
		max-height: 420px;
	}

	.t17-menu ul {
		display: block;
		height: auto;
		background: var(--t17-dark);
		transform: none;
	}

	#t17 .t17-menu a {
		padding: 0 16px;
		border-top: 1px solid #3a3a3a;
		line-height: 48px;
		font-size: 16px;
		color: #fff;
	}

	.mainpart {
		display: block;
		height: auto;
		overflow: visible;
	}

	.t17-spacer {
		display: none;
	}

	.mainpart > .page,
	#home,
	#contact {
		display: block;
		height: auto;
		margin: 0;
	}

	.page-scroll {
		height: auto;
		overflow: visible;
	}

	#home .mypic {
		height: auto;
	}

	#home .mypic img {
		height: 450px;
	}

	#home .about-text .page-scroll,
	#home .about-text.no-pic .page-scroll {
		padding: 40px 24px;
		text-align: center;
	}

	#portfolio .page-scroll,
	#press .page-scroll {
		padding: 30px 16px;
	}

	#t17-portfolio > h2 {
		padding-right: 0;
	}

	#t17-portfolio .wfa-gallery-filter {
		position: static;
		max-width: none;
		margin: 0 0 12px;
		text-align: left;
	}

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

	#resume .page-scroll {
		padding: 0 16px;
	}

	.t17-block {
		display: block;
		padding: 36px 0;
	}

	.chart-title {
		margin-bottom: 18px;
	}

	.experiences {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	#contact .contact-info .page-scroll {
		padding: 30px 16px 36px;
	}

	.t17-side {
		height: 320px;
	}

	.t17-foot {
		gap: 16px;
	}

	.t17-foot .footer-border {
		flex-basis: 60px;
	}
}

@media (max-width: 520px) {
	#t17 h2 {
		font-size: 32px;
	}

	#home .mypic img {
		height: 420px;
	}

	.experiences {
		grid-template-columns: minmax(0, 1fr);
	}

	#t17 .lightGallery.row > div {
		width: 100%;
	}

	.contact-title,
	.socials {
		float: none;
	}

	.socials {
		display: flex;
		flex-wrap: wrap;
		gap: 4px;
		margin-top: 10px;
	}

	.socials li {
		float: none;
		margin: 0;
	}

	.socials a {
		width: 44px;
		height: 44px;
		line-height: 44px;
	}
}

/* ------------------------------------------------------------ event popup */

/*
 *  The event bar above the page opens #myEvent, which is Bootstrap modal
 *  markup. This design loads no Bootstrap, so the popup printed open above
 *  the header; js/custom.php opens and closes it.
 */
#myEvent.modal {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1050;
	overflow-y: auto;
	padding: 60px 16px;
	background: rgba(0, 0, 0, .6);
	font-family: var(--t17-face-head, Arial, sans-serif);
}

#myEvent.modal.t17-shown {
	display: block;
}

#myEvent .modal-dialog {
	max-width: 560px;
	margin: 0 auto;
}

#myEvent .modal-content {
	background: #fff;
	color: #232323;
}

#myEvent .modal-header,
#myEvent .modal-body,
#myEvent .modal-footer {
	padding: 18px 24px;
}

#myEvent .modal-header {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: center;
	background: #ffae00;
}

#myEvent .modal-title {
	margin: 0;
	font-size: 20px;
}

#myEvent .close,
#myEvent .modal-footer .btn {
	padding: 6px 14px;
	border: 0;
	background: #232323;
	color: #fff;
	font: 600 14px var(--t17-face-head, Arial, sans-serif);
	cursor: pointer;
}

#myEvent .modal-footer {
	text-align: right;
}

#myEvent .modal-body {
	line-height: 1.6;
}

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

/*  THE PAGE IS CENTERED IN THE WINDOW, as the demo is. The header, the row of
    panels and the footer come to about 700px; they sat at the top with the
    rest of the window empty under them, and the few pixels over the fold gave
    the page a scrollbar the demo does not have. */
#t17 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-bottom: 0;
}

#t17 .t17-foot {
	margin-bottom: 0;
}

/*  The row of panels is the only thing that scrolls, and it scrolls
    sideways. Nothing on this page needs the window to scroll down. */
@media (min-width: 1000px) {
	#t17 {
		height: 100vh;
		overflow: hidden;
	}
}

/*  The event bar belongs to this design while it is on it: the theme's own
    bar, not a blue strip across the top of somebody else's. */
#event {
	background: #232323 !important;
	border-bottom: 0 !important;
	font: 13px/46px var(--t17-face-head, Arial, sans-serif) !important;
	letter-spacing: 1px;
	text-transform: uppercase;
}

#event #event_date .fa {
	color: var(--t17-accent);
}

/*  The calls to action, under the signature on the About card. */
#home #ghostButtons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 18px;
}

#home .ghostButton {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

#home .ghostButton a {
	display: flex;
	gap: 8px;
	align-items: center;
	padding: 9px 16px;
	background: #111;
	color: #fff;
	font-size: 12px;
	letter-spacing: 1px;
	text-transform: uppercase;
	text-decoration: none;
}

#home .ghostButton a strong {
	font-weight: 400;
}

#home .ghostButton a:hover {
	background: #fff;
	color: #111;
}

#home .ghostButton img,
#home .ghostButton svg {
	width: 15px;
	height: 15px;
}

/*  The icon set draws the social row in the contact panel.

    The mark sits INSIDE the square rather than being it, 2026-09-20.
    The theme's own rule above is .socials a { width: 32px; height: 32px;
    background: #000; color: #fff; font-size: 17px }, a black tile with a
    white glyph about half its width. Sizing the image to 100 per cent
    covered that tile completely, and with Color Block, the platform
    default, what showed was a full-bleed brand square: the black tile was
    there the whole time and nobody could see it.

    00_templates.icon_set_id is 4 for this design now, Knockout, white
    marks with no tile of their own, so the theme's tile shows and the
    mark sits in it at the ratio the theme's own font size implies.

    Percentages, because the narrow-screen block below takes the same
    square to 44px.  */
.socials a:has(img) {
	display: flex;
	align-items: center;
	justify-content: center;
}

.socials a img {
	display: block;
	width: 53%;
	height: 53%;
	object-fit: contain;
}