/* TOKENS */
:root {
	--bg: #060608;
	--bg2: #0d0d10;
	--bg3: #111116;
	--red: #c8102e;
	--red-dim: #6b0818;
	--red-glow: #ff1a3c;
	--green: #00e676;
	--green-dim: #005c2a;
	--text: #e0e0e0;
	--text-dim: #9898a8;
	--text-faint: #2a2a35;
	--border: rgba(200, 16, 46, 0.15);
	--mono: 'Share Tech Mono', monospace;
	--display: 'Bebas Neue', sans-serif;
	--body: 'Rajdhani', sans-serif;
}

/* BASE + W3.CSS OVERRIDES */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	overflow-x: hidden;
}

body {
	background: var(--bg);
	color: var(--text);
	font-family: var(--body);
	font-size: 17px;
	line-height: 1.7;
	overflow-x: hidden;
	/* Override W3 Verdana default */
}

/* W3 sets font-family on h1-h6 to Segoe UI/Arial, override */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--display);
	color: #fff;
	margin: 0;
}

/* W3 card: use bg3 (slightly elevated) as default background */
.w3-card {
	background: var(--bg3) !important;
	box-shadow: none !important;
	border: 1px solid var(--border) !important;
}

/* W3 table: remove default borders and padding */
.w3-table td,
.w3-table th {
	border: none !important;
	padding: 1rem 1.4rem !important;
}

/* W3 inputs: W3 uses border-bottom only, we want full border */
.w3-input {
	border: 1px solid var(--text-faint) !important;
	border-bottom: 1px solid var(--text-faint) !important;
	background: var(--bg) !important;
	color: var(--text) !important;
	font-family: var(--body) !important;
}

.w3-select {
	border: 1px solid var(--text-faint) !important;
	border-bottom: 1px solid var(--text-faint) !important;
	background: var(--bg) !important;
	color: var(--text) !important;
	font-family: var(--body) !important;
}

.w3-input:focus,
.w3-select:focus {
	border-color: var(--red) !important;
	outline: none !important;
}

/* W3 button:hover sets color:#000 !important and bg:#ccc !important, neutralize globally */
.w3-button:hover {
	color: inherit !important;
	background-color: transparent !important;
	box-shadow: none !important;
}

/* Specifically for nav links */
nav .w3-button:hover,
.tmg-mobile-nav .w3-button:hover {
	color: var(--red) !important;
	background-color: transparent !important;
}

/* Scanlines */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.06) 2px, rgba(0, 0, 0, 0.06) 4px);
	pointer-events: none;
	z-index: 9999;
}

/* Grain */
body::after {
	content: '';
	position: fixed;
	inset: -200%;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
	opacity: .05;
	pointer-events: none;
	z-index: 9998;
	animation: grain .35s steps(1) infinite;
}

@keyframes grain {
	0% {
		transform: translate(0, 0);
	}

	20% {
		transform: translate(-4%, -3%);
	}

	40% {
		transform: translate(3%, 4%);
	}

	60% {
		transform: translate(-3%, 2%);
	}

	80% {
		transform: translate(4%, -4%);
	}

	100% {
		transform: translate(0, 0);
	}
}

/*
SECTION BACKGROUNDS — AUTO-ALTERNATING
Odd  sections (1,3,5,7...) → --bg  (#060608)
Even sections (2,4,6,8...) → --bg2 (#0d0d10)
Add/remove/reorder sections freely, it stays correct.
*/
section:nth-of-type(odd) {
	background: var(--bg);
}

section:nth-of-type(even) {
	background: var(--bg2);
}

/* Hero keeps its own dark base regardless */
#hero {
	background: var(--bg);
}

/* Keep utility classes available for one-offs if needed */
.tmg-bg  { background: var(--bg);  }
.tmg-bg2 { background: var(--bg2); }

/* LAYOUT HELPERS */

/* Custom container, replaces w3-container to avoid W3's padding:0.01em 16px */
.tmg-container {
	width: 100%;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 3.5rem;
}

/* W3's own container override for areas that use it directly */
.w3-container {
	padding: 0 3.5rem !important;
	max-width: 1280px;
	margin: 0 auto;
}

/* All sections get vertical breathing room */
section {
	padding: 96px 0;
}

/* Shared typography */
.sec-label {
	font-family: var(--mono);
	font-size: .62rem;
	color: var(--red);
	letter-spacing: .3em;
	text-transform: uppercase;
	margin-bottom: .7rem;
	display: flex;
	align-items: center;
	gap: 10px;
}

.sec-label::before {
	content: '';
	display: inline-block;
	width: 18px;
	height: 1px;
	background: var(--red);
}

.sec-title {
	font-family: var(--display) !important;
	font-size: clamp(2.8rem, 5vw, 4.8rem) !important;
	line-height: .92 !important;
	letter-spacing: .03em !important;
	color: #fff !important;
}

.sec-subtitle {
	font-family: var(--display) !important;
	font-size: 2rem !important;
	color: #fff !important;
	letter-spacing: .03em;
	margin-bottom: 1.4rem;
}

.divider {
	width: 50px;
	height: 2px;
	background: linear-gradient(to right, var(--red), transparent);
	margin: 1.4rem 0 2.8rem;
}

.tmg-body-text {
	color: var(--text-dim);
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.95;
	margin-bottom: 1.1rem;
	text-align: justify;
}

.tmg-body-text strong {
	color: var(--text);
	font-weight: 600;
}

.tmg-hl {
	color: var(--red);
	font-weight: 600;
}

.tmg-red {
	color: var(--red);
}

/* NAV */
.tmg-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	height: 58px;
	background: rgba(6, 6, 8, .96) !important;
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--border);
}

.tmg-logo {
	font-family: var(--mono);
	font-size: .72rem;
	color: var(--red) !important;
	letter-spacing: .04em;
	line-height: 58px !important;
	padding: 0 1.5rem;
}

.tmg-navlink {
	font-family: var(--mono);
	font-size: .62rem;
	color: var(--text-dim) !important;
	letter-spacing: .12em;
	text-transform: uppercase;
	line-height: 58px !important;
	padding: 0 .8rem !important;
	transition: color .2s;
}

.tmg-navlink:hover {
	color: var(--red) !important;
}

.tmg-status {
	font-family: var(--mono);
	font-size: .58rem;
	color: var(--green) !important;
	border: 1px solid var(--green-dim);
	padding: 3px 10px;
	letter-spacing: .1em;
	margin: 16px .8rem 0;
	display: inline-block;
}

.tmg-hamburger {
	background: none !important;
	border: none;
	width: 44px;
	height: 58px !important;
	padding: 0 !important;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
}

.tmg-hamburger span {
	display: block;
	width: 22px;
	height: 1px;
	background: var(--text-dim);
}

.tmg-mobile-nav {
	position: fixed;
	top: 58px;
	left: 0;
	right: 0;
	background: rgba(6, 6, 8, .98) !important;
	border-bottom: 1px solid var(--border);
	z-index: 99;
}

.tmg-mobile-nav .tmg-navlink {
	line-height: 1 !important;
	padding: .9rem 1.5rem !important;
	display: block;
}

/* HERO: pure flex, no W3 col conflict */
#hero {
	min-height: 100vh;
	padding-top: 58px;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
}

.hero-grid {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(200, 16, 46, .032) 1px, transparent 1px),
		linear-gradient(90deg, rgba(200, 16, 46, .032) 1px, transparent 1px);
	background-size: 56px 56px;
	mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, black 30%, transparent 100%);
}

/* hero-inner is a flex row, NOT a W3 float row */
.hero-inner {
	width: 100%;
	padding: 0 3.5rem;
	display: flex;
	align-items: center;
	gap: 4rem;
	position: relative;
	z-index: 1;
	max-width: 1400px;
	margin: 0 auto;
}

.hero-content {
	flex: 1;
	min-width: 0;
}

.hero-image-col {
	flex-shrink: 0;
	width: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	opacity: 0;
	animation: fadeUp .8s ease .5s forwards;
	margin-right: 3rem;
}

.hero-eyebrow {
	font-family: var(--mono);
	font-size: .66rem;
	color: var(--red);
	letter-spacing: .28em;
	text-transform: uppercase;
	margin-bottom: 1.4rem;
	opacity: 0;
	animation: fadeUp .6s ease .2s forwards;
}

.hero-title {
	font-family: var(--display) !important;
	font-size: clamp(4.5rem, 9vw, 9rem) !important;
	line-height: .88 !important;
	letter-spacing: .015em !important;
	color: #fff !important;
	opacity: 0;
	animation: fadeUp .7s ease .4s forwards;
}

/* Glitch */
.glitch {
	position: relative;
	display: inline-block;
}

.glitch::before,
.glitch::after {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.glitch::before {
	color: var(--red);
	animation: g1 5s infinite;
	clip-path: polygon(0 25%, 100% 25%, 100% 45%, 0 45%);
}

.glitch::after {
	color: var(--green);
	opacity: .4;
	animation: g2 5s infinite;
	clip-path: polygon(0 62%, 100% 62%, 100% 74%, 0 74%);
}

@keyframes g1 {

	0%,
	88%,
	100% {
		transform: translate(0);
		opacity: 0
	}

	90% {
		transform: translate(-5px, 1px);
		opacity: 1
	}

	92% {
		transform: translate(5px, -1px);
		opacity: 1
	}

	94% {
		transform: translate(-3px, 2px);
		opacity: 1
	}

	96% {
		transform: translate(0);
		opacity: 0
	}
}

@keyframes g2 {

	0%,
	89%,
	100% {
		transform: translate(0);
		opacity: 0
	}

	91% {
		transform: translate(5px, 2px);
		opacity: 1
	}

	93% {
		transform: translate(-5px, -2px);
		opacity: 1
	}

	95% {
		transform: translate(0);
		opacity: 0
	}
}

.hero-sub {
	margin-top: 1.8rem;
	font-size: 1.05rem;
	font-weight: 300;
	color: var(--text-dim);
	max-width: 540px;
	line-height: 1.95;
	opacity: 0;
	animation: fadeUp .7s ease .7s forwards;
	text-align: justify;
}

.hero-sub strong {
	color: var(--text);
	font-weight: 600;
}

.hero-actions {
	display: flex;
	gap: 1rem;
	margin-top: 2.5rem;
	flex-wrap: wrap;
	opacity: 0;
	animation: fadeUp .7s ease .9s forwards;
}

.hero-stats {
	display: flex;
	gap: 2.5rem;
	margin-top: 2.8rem;
	flex-wrap: wrap;
	opacity: 0;
	animation: fadeUp .7s ease 1.1s forwards;
}

.stat-num {
	font-family: var(--display);
	font-size: 1.6rem;
	color: var(--red);
	line-height: 1;
	letter-spacing: .04em;
}

.stat-label {
	font-family: var(--mono);
	font-size: .54rem;
	color: var(--text-dim);
	letter-spacing: .15em;
	text-transform: uppercase;
	margin-top: 3px;
}

.hero-avatar {
	width: 400px;
	height: 400px;
	border-radius: 50%;
	border: 2px solid var(--red);
	object-fit: cover;
	box-shadow: 0 0 40px rgba(200, 16, 46, .25), 0 0 80px rgba(200, 16, 46, .1);
	display: block;
}

.hero-avatar-placeholder {
	width: 400px;
	height: 400px;
	border-radius: 50%;
	border: 2px solid var(--red);
	background: var(--bg3);
	display: none;
	align-items: center;
	justify-content: center;
	font-family: var(--display);
	font-size: 4.5rem;
	color: var(--red);
}

.hero-ring {
	position: absolute;
	width: 450px;
	height: 450px;
	border-radius: 50%;
	border: 1px solid rgba(200, 16, 46, .2);
	animation: spin 22s linear infinite;
}

.hero-ring::before {
	content: '';
	position: absolute;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--red);
	top: -3.5px;
	left: 50%;
	transform: translateX(-50%);
}

@keyframes spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translateY(18px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* BUTTONS */
.tmg-btn-primary,
.tmg-btn-ghost {
	font-family: var(--mono);
	font-size: .68rem;
	letter-spacing: .15em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 12px 26px;
	cursor: pointer;
	border: none;
	display: inline-flex;
	align-items: center;
	transition: all .2s;
}

.tmg-btn-primary {
	background: var(--red);
	color: #fff !important;
	clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}

.tmg-btn-primary:hover {
	background: var(--red-glow) !important;
	box-shadow: 0 0 28px rgba(200, 16, 46, .45);
	color: #fff !important;
}

.tmg-btn-ghost {
	background: transparent !important;
	color: var(--text-dim) !important;
	border: 1px solid var(--text-faint);
}

.tmg-btn-ghost:hover {
	border-color: var(--red);
	color: var(--red) !important;
	background: transparent !important;
}

/*
EXPERTISE CARDS
Default = elevated (bg3), hover = red glow
*/
.exp-item {
	padding: 1.2rem 1.4rem !important;
	transition: box-shadow .25s, border-color .25s;
	margin-bottom: 0 !important;
	/* bg3 comes from global .w3-card override */
}

.exp-item:hover {
	box-shadow: 0 0 0 1px rgba(200, 16, 46, .4), 0 4px 24px rgba(200, 16, 46, .14) !important;
	border-color: rgba(200, 16, 46, .35) !important;
}

.exp-icon {
	font-size: 1.1rem;
	margin-bottom: .4rem;
	display: block;
	text-align: center;
}

.exp-name {
	font-family: var(--mono);
	font-size: .63rem;
	color: var(--red);
	letter-spacing: .1em;
	text-transform: uppercase;
	margin-bottom: .25rem;
	text-align: center;
}

.exp-desc {
	font-size: .82rem;
	color: var(--text-dim);
	font-weight: 300;
	line-height: 1.6;
	text-align: justify;
}

/*
TOOLS
Default = bg3 + red top line visible, hover = glow
*/
/* tools-header-row: pure flex, NOT a W3 float row */
.tools-header-row {
	display: flex;
	justify-content: space-between;
	margin-bottom: 2.5rem;
	gap: 2rem;
	flex-wrap: wrap;
}

.tools-header-left {
	flex-shrink: 0;
}

.tools-note {
	font-family: var(--mono);
	font-size: .62rem;
	color: var(--text-dim);
	width: 100%;
	max-width: none;
	line-height: 1.9;
	border-left: 2px solid var(--red-dim);
	padding-left: 1rem;
	text-align: left;
}

.tools-note strong {
	color: var(--text);
}

.tool-card {
	padding: 2rem 1.8rem !important;
	position: relative;
	overflow: hidden;
	transition: box-shadow .3s, border-color .3s;
	margin-bottom: 0 !important;
	/* bg3 from global .w3-card */
}

/* Red top line always visible by default */
.tool-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(to right, var(--red), transparent);
	opacity: 1;
	transition: background .3s;
}

/* Hover: stronger glow + brighter top line */
.tool-card:hover {
	box-shadow: 0 0 0 1px rgba(200, 16, 46, .45), 0 6px 32px rgba(200, 16, 46, .18) !important;
	border-color: rgba(200, 16, 46, .4) !important;
}

.tool-card:hover::before {
	background: linear-gradient(to right, var(--red-glow), transparent);
}

.tool-num {
	font-family: var(--mono);
	font-size: .56rem;
	color: var(--text-faint);
	letter-spacing: .2em;
	margin-bottom: 1.2rem;
}

.tool-plat {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: var(--mono);
	font-size: .57rem;
	letter-spacing: .13em;
	text-transform: uppercase;
	padding: 3px 8px;
	border: 1px solid;
	margin-bottom: 1rem;
}

.plat-win {
	color: #4fc3f7;
	border-color: rgba(79, 195, 247, .22);
}

.plat-lin {
	color: #ce93d8;
	border-color: rgba(206, 147, 216, .22);
}

.tool-name {
	font-family: var(--display) !important;
	font-size: 2.2rem !important;
	color: #fff !important;
	letter-spacing: .04em;
	line-height: 1;
	margin-bottom: .35rem;
	text-align: center;
}

.tool-type {
	font-family: var(--mono);
	font-size: .62rem;
	color: var(--red);
	letter-spacing: .13em;
	text-transform: uppercase;
	margin-bottom: 1rem;
	text-align: center;
}

.tool-desc {
	font-size: .86rem;
	color: var(--text-dim);
	font-weight: 300;
	line-height: 1.88;
	margin-bottom: 1.2rem;
	text-align: justify;
}

.tool-desc code {
	font-family: var(--mono);
	font-size: .74rem;
	color: var(--green);
	word-break: break-all;
}

.tool-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding-bottom: .5rem;
}

.tag {
	font-family: var(--mono);
	font-size: .54rem;
	color: var(--text-dim);
	border: 1px solid var(--text-faint);
	padding: 2px 7px;
	letter-spacing: .08em;
}

/* Link default = red; hover = red-glow + text glow */
.tool-link {
	font-family: var(--mono);
	font-size: .6rem;
	color: var(--red);
	text-decoration: none;
	letter-spacing: .08em;
	transition: color .2s, text-shadow .2s;
	display: inline-block;
	margin-top: .5rem;
}

.tool-link:hover {
	color: var(--red-glow);
	text-shadow: 0 0 10px rgba(255, 26, 60, .55);
}

/*
CVEs
Default = bg3, hover = red glow
*/
.cve-sublabel {
	font-family: var(--mono);
	font-size: .62rem;
	color: var(--red);
	letter-spacing: .18em;
	text-transform: uppercase;
	margin-bottom: 1rem;
}

.cve-table {
	border: 1px solid var(--border) !important;
}

.cve-head {
	background: var(--bg3) !important;
	font-family: var(--mono);
	font-size: .57rem;
	color: var(--text-faint) !important;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.cve-row {
	background: var(--bg3) !important;
	border-top: 1px solid var(--border) !important;
	transition: box-shadow .2s, border-color .2s;
}

.cve-row:hover {
	box-shadow: inset 0 0 0 1px rgba(200, 16, 46, .35), 0 2px 18px rgba(200, 16, 46, .1) !important;
	border-top-color: rgba(200, 16, 46, .3) !important;
}

.cve-id {
	font-family: var(--mono);
	font-size: .74rem;
	color: var(--red);
	letter-spacing: .04em;
	white-space: nowrap;
}

.cve-tt {
	font-size: .92rem;
	font-weight: 600;
	color: var(--text);
	margin-bottom: .18rem;
}

.cve-sub {
	font-family: var(--mono);
	font-size: .6rem;
	color: var(--text-dim);
	letter-spacing: .04em;
}

.cve-target {
	font-family: var(--mono);
	font-size: .63rem;
	color: var(--text-dim);
}

.sev {
	font-family: var(--mono);
	font-size: .58rem;
	letter-spacing: .1em;
	padding: 4px 8px;
	border: 1px solid;
	text-transform: uppercase;
	white-space: nowrap;
}

.sev-m {
	color: #ffd54f;
	border-color: rgba(255, 213, 79, .3);
}

.sev-h {
	color: #ff7043;
	border-color: rgba(255, 112, 67, .3);
}

.sev-i {
	color: #80cbc4;
	border-color: rgba(128, 203, 196, .3);
}

/*
RESEARCH / PAPERS
Default = bg3 + red top line, hover = glow
*/
.paper-card {
	padding: 2.4rem 2.8rem !important;
	position: relative;
	transition: box-shadow .3s, border-color .3s;
	/* bg3 from global .w3-card */
}

/* Red top line always visible */
.paper-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(to right, var(--red), transparent);
	transition: background .3s;
}

.paper-card:hover {
	box-shadow: 0 0 0 1px rgba(200, 16, 46, .45), 0 6px 32px rgba(200, 16, 46, .18) !important;
	border-color: rgba(200, 16, 46, .4) !important;
}

.paper-card:hover::before {
	background: linear-gradient(to right, var(--red-glow), transparent);
}

.paper-label {
	font-family: var(--mono);
	font-size: .6rem;
	color: var(--red);
	letter-spacing: .22em;
	text-transform: uppercase;
	margin-bottom: .9rem;
}

.paper-title {
	font-family: var(--display) !important;
	font-size: 1.6rem !important;
	color: #fff !important;
	letter-spacing: .02em;
	line-height: 1.1;
	margin-bottom: 1rem;
}

.paper-desc {
	font-size: .9rem;
	color: var(--text-dim);
	font-weight: 300;
	line-height: 1.9;
	margin-bottom: 1.4rem;
	text-align: justify;
}

.paper-cve-label {
	font-family: var(--mono);
	font-size: .58rem;
	color: var(--text-faint);
	letter-spacing: .18em;
	text-transform: uppercase;
	margin-bottom: .7rem;
}

.paper-cve-list {
	display: flex;
	flex-direction: column;
	gap: .35rem;
}

.pcve {
	font-family: var(--mono);
	font-size: .65rem;
	color: var(--text-dim);
	line-height: 1.5;
	padding-left: .9rem;
	border-left: 2px solid var(--red-dim);
	letter-spacing: .03em;
}

.rc {
	padding: 2rem 1.8rem !important;
	transition: box-shadow .25s, border-color .25s;
	/* bg3 from global .w3-card */
}

.rc:hover {
	box-shadow: 0 0 0 1px rgba(200, 16, 46, .4), 0 4px 24px rgba(200, 16, 46, .14) !important;
	border-color: rgba(200, 16, 46, .35) !important;
}

.rc-type {
	font-family: var(--mono);
	font-size: .58rem;
	color: var(--red);
	letter-spacing: .18em;
	text-transform: uppercase;
	margin-bottom: .7rem;
}

.rc-title {
	font-size: .97rem;
	font-weight: 600;
	color: var(--text);
	margin-bottom: .5rem;
	line-height: 1.4;
}

.rc-desc {
	font-size: .84rem;
	color: var(--text-dim);
	font-weight: 300;
	line-height: 1.85;
}

/*
TEACHING
Default = bg3, hover = glow
*/
.course-item {
	display: flex !important;
	gap: 1.2rem;
	align-items: flex-start;
	padding: 1.2rem 1.6rem !important;
	transition: box-shadow .25s, border-color .25s;
	margin-bottom: 1px !important;
	/* bg3 from global .w3-card */
}

.course-item:hover {
	box-shadow: 0 0 0 1px rgba(200, 16, 46, .4), 0 4px 20px rgba(200, 16, 46, .12) !important;
	border-color: rgba(200, 16, 46, .35) !important;
}

.course-num {
	font-family: var(--mono);
	font-size: .6rem;
	color: var(--red);
	letter-spacing: .1em;
	margin-top: .15rem;
	flex-shrink: 0;
}

.course-name {
	font-size: .94rem;
	font-weight: 600;
	color: var(--text);
	margin-bottom: .2rem;
}

.course-desc {
	font-size: .82rem;
	color: var(--text-dim);
	font-weight: 300;
	line-height: 1.6;
}

/*
TALKS
Default = bg3, hover = glow
*/

.talk-thumb {
	position: relative;
	height: 220px;
	border: 1px solid var(--border);
	cursor: pointer;
	overflow: hidden;
	margin-top: 1.2rem;
	background: var(--bg3);
}

.talk-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: brightness(.8);
	transition: .3s;
}

.talk-thumb:hover img {
	filter: brightness(.5);
	transform: scale(1.05);
}

.tt-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--mono);
	font-size: .7rem;
	color: var(--red);
	letter-spacing: .15em;
	background: rgba(0,0,0,.4);
	opacity: 0;
	transition: .2s;
}

.talk-thumb:hover .tt-overlay {
	opacity: 1;
}

.talk-thumb iframe {
	width: 100%;
	height: 100%;
}

.talk-gallery {
	margin-top: 1.5rem;
}

.talk-card {
	padding: 2rem 1.8rem !important;
	transition: box-shadow .25s, border-color .25s;
	/* bg3 from global .w3-card */
}

.talks-wrapper {
	width: 100%;
	max-width: 1250px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 1.8rem;
}

.talk-card:hover {
	box-shadow: 0 0 0 1px rgba(200, 16, 46, .45), 0 6px 28px rgba(200, 16, 46, .15) !important;
	border-color: rgba(200, 16, 46, .4) !important;
}

.talk-featured {
	position: relative;
}

.talk-featured::after {
	content: '★ FEATURED';
	position: absolute;
	top: 1.2rem;
	right: 1.5rem;
	font-family: var(--mono);
	font-size: .54rem;
	color: var(--red);
	letter-spacing: .14em;
}

.t-badge {
	display: inline-block;
	background: var(--red);
	font-family: var(--mono);
	font-size: .6rem;
	color: #fff;
	padding: 2px 10px;
	letter-spacing: .13em;
	clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 0 100%);
	margin-bottom: .8rem;
}

.t-title {
	font-family: var(--display) !important;
	font-size: 1.5rem !important;
	color: #fff !important;
	letter-spacing: .03em;
	line-height: 1.1;
	margin-bottom: .7rem;
}

.t-desc {
	font-size: .84rem;
	color: var(--text-dim);
	font-weight: 300;
	line-height: 1.85;
	margin-bottom: 1.1rem;
	text-align: justify;
}

.t-topics {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.talk-meta {
	font-family: var(--mono);
	font-size: .58rem;
	color: var(--text-faint);
	letter-spacing: .14em;
	text-transform: uppercase;
	margin-top: 1.2rem;
	border-left: 2px solid var(--red-dim);
	padding-left: .8rem;
}

.talk-thumb-static {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	cursor: default;
	padding: 1.5rem;
}

.talk-thumb-static:hover img {
	filter: none;
	transform: none;
}

.tts-year {
	font-family: var(--display);
	font-size: 3.2rem;
	color: var(--red);
	line-height: 1;
}

.tts-title {
	font-family: var(--mono);
	font-size: .6rem;
	color: var(--text);
	letter-spacing: .1em;
	text-transform: uppercase;
	text-align: center;
}

.tts-subtitle {
	font-family: var(--body);
	font-size: .8rem;
	color: var(--text-dim);
	font-weight: 300;
	font-style: italic;
	text-align: center;
	padding: 0 1rem;
}

.tts-tags {
	font-family: var(--mono);
	font-size: .55rem;
	color: var(--text-faint);
	letter-spacing: .08em;
	text-transform: uppercase;
	text-align: center;
	padding: 0 1rem;
}



/* CONTACT */
.contact-social {
	display: flex;
	flex-direction: column;
	gap: .6rem;
	margin-top: 2rem;
}

.social-link {
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: var(--mono);
	font-size: .7rem;
	color: var(--text-dim) !important;
	text-decoration: none;
	padding: 11px 16px;
	border: 1px solid var(--text-faint);
	transition: all .2s;
}

.social-link:hover {
	border-color: var(--red);
	color: var(--red) !important;
	background: rgba(200, 16, 46, .04);
	box-shadow: 0 0 14px rgba(200, 16, 46, .12);
}

.social-link svg {
	width: 14px;
	height: 14px;
	fill: currentColor;
	flex-shrink: 0;
}

.sl-label {
	flex: 1;
	letter-spacing: .1em;
}

.sl-handle {
	color: var(--text-faint);
	font-size: .6rem;
}

.social-link:hover .sl-handle {
	color: var(--red-dim);
}

.contact-form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.form-group {
	display: flex;
	flex-direction: column;
	gap: .4rem;
}

.form-group label {
	font-family: var(--mono);
	font-size: .6rem;
	color: var(--text-dim);
	letter-spacing: .12em;
	text-transform: uppercase;
}

.tmg-input {
	font-family: var(--body) !important;
	font-size: .92rem !important;
	font-weight: 300 !important;
	padding: 10px 14px !important;
}

.w3-select.tmg-input {
	appearance: none;
	cursor: pointer;
}

.w3-select.tmg-input option {
	background: var(--bg3);
}

/* Remove W3 row-padding from form col groups */
.w3-row-padding .form-group {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.w3-row-padding .w3-col.form-group:first-child {
	padding-right: 8px !important;
}

.w3-row-padding .w3-col.form-group:last-child {
	padding-left: 8px !important;
}

/* FOOTER */
.tmg-footer {
	background: var(--bg);
	border-top: 1px solid var(--border);
	padding: 1.6rem 0;
}

.foot-l {
	font-family: var(--mono);
	font-size: .56rem;
	color: var(--text-faint);
	letter-spacing: .08em;
	padding-top: .2rem;
}

.foot-l span {
	color: var(--red-dim);
}

.foot-r {
	font-family: var(--mono);
	font-size: .56rem;
	color: var(--text-faint);
	letter-spacing: .08em;
	text-align: right;
	padding-top: .2rem;
}

/* RESPONSIVE */
@media (max-width: 992px) {

	.tmg-container,
	.w3-container {
		padding: 0 2rem !important;
	}
}

@media (max-width: 600px) {

	.tmg-container,
	.w3-container {
		padding: 0 1.2rem !important;
	}

	section {
		padding: 72px 0;
	}

	.hero-inner {
		padding: 0 1.2rem;
		flex-direction: column;
		padding-top: 2rem;
		padding-bottom: 2rem;
	}

	.hero-title {
		font-size: clamp(3.5rem, 18vw, 6rem) !important;
	}

	.hero-stats {
		gap: 1.5rem;
	}

	.hero-actions {
		flex-direction: column;
	}

	.tools-header-row {
		flex-direction: column;
	}

	.foot-r {
		text-align: left;
	}

	.paper-card {
		padding: 1.8rem 1.4rem !important;
	}
}

/*
EQUAL-HEIGHT CARD ROWS
Overrides W3.CSS floats with flex so all cards
in the same row stretch to the same height
*/
.cards-row {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: stretch !important;
}

/* w3-col inside cards-row becomes a flex column */
.cards-row>.w3-col {
	display: flex !important;
	flex-direction: column !important;
}

/* The w3-card inside fills the full column height */
.cards-row>.w3-col>.w3-card {
	flex: 1 !important;
	display: flex !important;
	flex-direction: column !important;
}

/* tool-desc and paper-desc grow to fill available space,
pushing tags/links to the bottom of each card */
.cards-row .tool-desc,
.cards-row .paper-desc,
.cards-row .rc-desc,
.cards-row .svc-desc,
.cards-row .exp-desc,
.cards-row .t-desc {
	flex: 1;
}