/*
	site.css — aravindsundararajan.tech
	Hand-written replacement for the old Solid State template CSS.
	Amber-on-black CRT terminal theme. No framework, no preprocessor.
*/

/* ========================================================================
   1. Tokens
   ======================================================================== */

:root {
	/* palette */
	--bg: #050403;
	--bg-panel: #0a0705;
	--bg-raised: #120c06;
	--amber: #ff8800;
	--amber-bright: #ffaa33;
	--amber-dim: rgba(255, 136, 0, 0.55);
	--amber-faint: rgba(255, 136, 0, 0.12);
	--line: rgba(255, 136, 0, 0.35);
	--line-strong: rgba(255, 136, 0, 0.7);
	--green: #4dff4d;
	--yellow: #ffd633;
	--red: #ff5544;
	--text: #ffb866;          /* body text: softer amber, easier on the eyes */
	--text-bright: #ffd9a8;

	/* type */
	--font-mono: "CaskaydiaMono", "Cascadia Mono", ui-monospace, "Courier New", monospace;
	--font-glyph: "ProceduralGrapheme", var(--font-mono);

	/* rhythm */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 1rem;
	--space-4: 1.5rem;
	--space-5: 2.5rem;
	--space-6: 4rem;
	--measure: 68ch;
	--radius: 2px;

	/* chrome */
	--ticker-h: 2rem;
	--glow: 0 0 12px rgba(255, 136, 0, 0.25);
	--glow-strong: 0 0 18px rgba(255, 136, 0, 0.4);
}

/* ========================================================================
   2. Fonts
   ======================================================================== */

@font-face {
	font-family: "CaskaydiaMono";
	src: url("../../content/CaskaydiaMonoNerdFont-Regular.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "ProceduralGrapheme";
	src: url("../../content/proceduralgrapheme-font.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

/* ========================================================================
   3. Reset + base
   ======================================================================== */

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

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font-mono);
	font-size: 16px;
	line-height: 1.65;
	padding-top: var(--ticker-h);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* faint global scanlines + vignette, one overlay for the whole page */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 9000;
	background:
		radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.35) 100%),
		repeating-linear-gradient(0deg,
			transparent 0px, transparent 2px,
			rgba(255, 136, 0, 0.02) 2px, rgba(255, 136, 0, 0.02) 3px);
}

img { max-width: 100%; height: auto; display: block; }

::selection { background: var(--amber); color: #000; }

/* amber scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(255, 136, 0, 0.4); border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--amber); }

/* ========================================================================
   4. Typography
   ======================================================================== */

h1, h2, h3, h4 {
	color: var(--amber);
	line-height: 1.25;
	margin: 0 0 var(--space-3);
	font-weight: 700;
	letter-spacing: 0.02em;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; }

p {
	margin: 0 0 var(--space-3);
	max-width: var(--measure);
}

ul { margin: 0 0 var(--space-3); padding-left: 1.5em; }
li { margin-bottom: var(--space-1); }
li::marker { color: var(--amber-dim); }

a {
	color: var(--amber);
	text-decoration: none;
	border-bottom: 1px solid var(--line);
	transition: background-color 0.15s ease, color 0.15s ease;
}

a:hover {
	background: var(--amber);
	color: #000;
	border-bottom-color: var(--amber);
	text-shadow: none;
}

a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--amber-bright);
	outline-offset: 2px;
}

/* section heading with terminal prompt */
.section-title {
	display: block;
	border-bottom: 1px solid var(--line);
	padding-bottom: var(--space-2);
	margin: var(--space-5) 0 var(--space-4);
	text-shadow: var(--glow);
	font-size: 1.25rem;
}

.section-title::before {
	content: "## ";
	color: var(--amber-dim);
}

/* ========================================================================
   5. Status ticker
   ======================================================================== */

.ticker {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--ticker-h);
	background: #000;
	border-bottom: 1px solid var(--amber);
	box-shadow: var(--glow);
	z-index: 10000;
	overflow: hidden;
	font-size: 0.75rem;
	line-height: var(--ticker-h);
	user-select: none;
}

.ticker-track {
	display: flex;
	width: max-content;
	will-change: transform;
}

/* animation is enabled by site.js after it duplicates the track content;
   without JS the ticker is a static row instead of a broken loop */
.ticker-ready .ticker-track {
	animation: ticker-scroll 40s linear infinite;
}

.ticker:hover .ticker-track { animation-play-state: paused; }

@keyframes ticker-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }  /* content is duplicated, so -50% loops seamlessly */
}

/* the secret message: status lines render as procedural glyphs;
   hovering pauses the ticker and decodes the item to plaintext */
.ticker-item {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0 2em;
	color: var(--amber);
	white-space: nowrap;
	border-right: 1px solid var(--line);
	font-family: var(--font-glyph);
}

.ticker-item:hover {
	font-family: var(--font-mono);
	background: var(--amber);
	color: #000;
}

.ticker-item:hover .timestamp { color: rgba(0, 0, 0, 0.7); }

.ticker-item .dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--green);
	box-shadow: 0 0 6px var(--green);
	animation: pulse 2s infinite;
}

.ticker-item .dot.warning { background: var(--yellow); box-shadow: 0 0 6px var(--yellow); }
.ticker-item .dot.error   { background: var(--red);    box-shadow: 0 0 6px var(--red); }

.ticker-item .timestamp {
	color: var(--amber-dim);
	font-size: 0.9em;
}

@keyframes pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.4; }
}

/* ========================================================================
   6. Header + nav
   ======================================================================== */

.site-header {
	position: sticky;
	top: var(--ticker-h);
	z-index: 9500;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding: var(--space-2) var(--space-4);
	background: rgba(5, 4, 3, 0.92);
	backdrop-filter: blur(4px);
	border-bottom: 1px solid var(--line);
}

.site-title {
	font-weight: 700;
	border-bottom: none;
	white-space: nowrap;
	text-shadow: var(--glow);
	min-width: 0;              /* long article slugs must not widen the page */
	overflow: hidden;
	text-overflow: ellipsis;
}

.site-title:hover { background: transparent; color: var(--amber-bright); }

.site-title .prompt { color: var(--amber-dim); }

/* blinking block cursor */
.cursor {
	display: inline-block;
	width: 0.55em;
	height: 1em;
	margin-left: 0.15em;
	background: var(--amber);
	vertical-align: text-bottom;
	animation: blink 1.1s steps(1) infinite;
}

@keyframes blink {
	0%, 55% { opacity: 1; }
	56%, 100% { opacity: 0; }
}

.site-nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
}

.site-nav a {
	border-bottom: none;
	padding: 0.15em 0.6em;
	font-size: 0.9rem;
	color: var(--text);
}

.site-nav a::before { content: "["; color: var(--amber-dim); }
.site-nav a::after  { content: "]"; color: var(--amber-dim); }

.site-nav a:hover {
	background: var(--amber);
	color: #000;
}
.site-nav a:hover::before,
.site-nav a:hover::after { color: #000; }

.site-nav a[aria-current="page"] {
	color: var(--amber-bright);
	text-shadow: var(--glow);
}
.site-nav a[aria-current="page"]::before { content: "[*"; }

.nav-toggle {
	display: none;
	background: none;
	border: 1px solid var(--line);
	color: var(--amber);
	font-family: inherit;
	font-size: 0.9rem;
	padding: 0.25em 0.75em;
	cursor: pointer;
}

.nav-toggle:hover { background: var(--amber); color: #000; }

/* ========================================================================
   7. Layout
   ======================================================================== */

main {
	flex: 1;
	width: 100%;
	max-width: 72rem;
	margin: 0 auto;
	padding: var(--space-5) var(--space-4) var(--space-6);
}

/* page hero */
.page-hero {
	margin-bottom: var(--space-5);
	border: 1px solid var(--line);
	background: var(--bg-panel);
	padding: var(--space-4);
	box-shadow: var(--glow);
}

.page-hero h1 {
	margin-bottom: var(--space-2);
	text-shadow: var(--glow-strong);
	font-size: clamp(1.35rem, 5.5vw, 2rem); /* the full name fits one line on small phones */
}

.page-hero h1::before {
	content: "> ";
	color: var(--amber-dim);
}

.page-hero .subtitle {
	color: var(--text);
	margin: 0;
	max-width: none;
}

.page-hero .hero-links {
	margin-top: var(--space-3);
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.page-hero .hero-links a {
	border: 1px solid var(--line-strong);
	padding: 0.3em 1em;
	border-bottom-width: 1px;
}

/* index hero centered variant */
.page-hero.center {
	text-align: center;
}
.page-hero.center p,
.page-hero.center .subtitle { margin-left: auto; margin-right: auto; }
.page-hero.center .hero-links { justify-content: center; }
.page-hero.center h1::before { content: ""; }

.page-hero .hero-icon {
	font-size: 2.5rem;
	color: var(--amber);
	text-shadow: var(--glow-strong);
	margin-bottom: var(--space-3);
}

/* ========================================================================
   8. Console cards
   ======================================================================== */

.console-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
	gap: var(--space-4);
	margin-bottom: var(--space-5);
}

/* index: four cards read better as 2x2 than 3+1 */
@media (min-width: 44rem) {
	.console-grid.cols-2 { grid-template-columns: 1fr 1fr; }
}

.console {
	min-width: 0; /* let grid shrink cards below their images' intrinsic width */
	display: flex;
	flex-direction: column;
	background: var(--bg-panel);
	border: 1px solid var(--line);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
	overflow: hidden;
}

.console:hover {
	border-color: var(--amber);
	box-shadow: var(--glow-strong);
	transform: translateY(-2px);
}

/* window chrome bar */
.console-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.3em 0.75em;
	background: var(--bg-raised);
	border-bottom: 1px solid var(--line);
	font-size: 0.75rem;
	color: var(--amber-dim);
	white-space: nowrap;
	overflow: hidden;
}

.console-bar::after {
	content: "█";
	animation: blink 1.1s steps(1) infinite;
	color: var(--amber-dim);
}

.console-media {
	display: block;
	border-bottom: 1px solid var(--line);
	overflow: hidden;
	line-height: 0;
}

.console-media img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	filter: saturate(0.9) contrast(1.02);
	transition: filter 0.2s ease, transform 0.3s ease;
}

.console:hover .console-media img {
	filter: saturate(1.05) contrast(1.05) brightness(1.05);
	transform: scale(1.015);
}

/* posters/abstracts are tall — letterbox instead of cropping */
.console-media.contain img {
	object-fit: contain;
	background: #000;
}

.console-body {
	padding: var(--space-3);
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--space-2);
}

.console-body h3 { margin: 0; }
.console-body p { margin: 0; flex: 1; font-size: 0.9rem; }

.console-body .go {
	align-self: flex-start;
	font-size: 0.85rem;
	margin-top: var(--space-2);
}

.console-body .go::before { content: "$\00a0"; color: var(--amber-dim); }
.console-body .go:hover::before { color: #000; }

/* ========================================================================
   9. Panels & terminal bits (CV, hardware)
   ======================================================================== */

.panel {
	background: var(--bg-panel);
	border: 1px solid var(--line);
	padding: var(--space-4);
	margin-bottom: var(--space-4);
	box-shadow: var(--glow);
}

.system-message {
	font-size: 0.85rem;
	color: var(--amber);
	margin: var(--space-2) 0;
	padding: var(--space-2) var(--space-3);
	border-left: 3px solid var(--amber);
	background: var(--amber-faint);
	max-width: none;
}

.system-message.success { border-left-color: var(--green);  color: var(--green); }
.system-message.warning { border-left-color: var(--yellow); color: var(--yellow); }
.system-message.error   { border-left-color: var(--red);    color: var(--red); }

/* contact row */
.contact-grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3) var(--space-5);
}

.contact-item {
	display: flex;
	align-items: center;
	gap: 0.6em;
	min-width: 0;
}

/* long emails/URLs wrap instead of pushing the page sideways */
.contact-item a { overflow-wrap: anywhere; }

.contact-item .icon { color: var(--amber-dim); }

/* experience / education */
.experience-item,
.education-item {
	padding: var(--space-3) 0;
	border-bottom: 1px dashed var(--line);
}

.experience-item:last-child,
.education-item:last-child { border-bottom: none; padding-bottom: 0; }

.experience-item:first-child,
.education-item:first-child { padding-top: 0; }

.experience-item h4,
.education-item h4 {
	margin-bottom: var(--space-1);
	color: var(--text-bright);
}

.meta {
	font-size: 0.8rem;
	color: var(--amber-dim);
	margin-bottom: var(--space-2);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.experience-item ul { margin-bottom: 0; font-size: 0.9rem; }

/* publications */
.publication-item {
	padding: var(--space-2) 0;
	border-bottom: 1px dashed var(--line);
	font-size: 0.9rem;
	max-width: var(--measure);
}

.publication-item:last-child { border-bottom: none; }

.publication-item .pub-authors { color: var(--text-bright); }
.publication-item .pub-title { display: block; color: var(--amber); }
.publication-item .pub-journal { font-style: italic; }
.publication-item .pub-status { color: var(--amber-dim); }

/* skills */
.skills-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--space-4);
}

.skill-category h4 {
	color: var(--text-bright);
	border-bottom: 1px solid var(--line);
	padding-bottom: var(--space-1);
}

.skill-category h4::before { content: "> "; color: var(--amber-dim); }

.skill-category ul {
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 0.85rem;
}

.skill-category li::before { content: "- "; color: var(--amber-dim); }

/* ========================================================================
   10. Articles
   ======================================================================== */

.article-content {
	max-width: 56rem;
	margin: 0 auto;
}

.article-section { margin-bottom: var(--space-5); }

/* legacy heading class used throughout article bodies */
h2.major, h3.major {
	border-bottom: 1px solid var(--line);
	padding-bottom: var(--space-2);
	margin: var(--space-4) 0 var(--space-3);
	text-shadow: var(--glow);
}

h3.major::before, h2.major::before {
	content: "## ";
	color: var(--amber-dim);
}

/* table of contents / bottom nav */
.article-nav ul {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin: 0 0 var(--space-4);
}

.article-nav li { margin: 0; }

.article-nav a {
	border: 1px solid var(--line);
	border-bottom-width: 1px;
	padding: 0.25em 0.9em;
	font-size: 0.85rem;
	display: inline-block;
}

/* buttons */
.button {
	display: inline-block;
	border: 1px solid var(--line-strong);
	padding: 0.45em 1.2em;
	color: var(--amber);
	background: transparent;
	font-size: 0.9rem;
	cursor: pointer;
}

.button:hover { background: var(--amber); color: #000; }

.button.special {
	background: var(--amber);
	color: #000;
	font-weight: 700;
}

.button.special:hover {
	background: var(--amber-bright);
	box-shadow: var(--glow-strong);
}

ul.actions {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.github-link { margin-top: var(--space-3); }

/* hero image */
.image.main {
	display: block;
	margin: 0 0 var(--space-4);
	border: 1px solid var(--line);
}

.image.main img { width: 100%; }

/* bare pre blocks (older articles) */
pre {
	background: #000;
	border: 1px solid var(--line);
	padding: var(--space-3);
	margin: 0 0 var(--space-4);
	overflow-x: auto;
	font-size: 0.85rem;
	line-height: 1.5;
}

/* embedded PDFs (dissertation) — viewport-relative so a phone isn't
   handed an 800px iframe inside a 568px screen */
.pdf-container {
	width: 100%;
	height: clamp(360px, 75vh, 800px);
	border: 1px solid var(--line);
	margin: 0 0 var(--space-4);
	background: #000;
}

.pdf-container iframe { width: 100%; height: 100%; border: none; }

.pdf-download { text-align: center; margin: 0 0 var(--space-3); }

.pdf-download a::before { content: "\1F4C4  "; }

/* code blocks (markup ships pre-highlighted with token spans) */
.code-block {
	background: #000;
	border: 1px solid var(--line);
	margin: 0 0 var(--space-4);
	font-size: 0.85rem;
	overflow: hidden;
}

.code-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-2);
	padding: 0.35em 0.9em;
	background: var(--bg-raised);
	border-bottom: 1px solid var(--line);
	font-size: 0.8rem;
	color: var(--amber-dim);
}

.language-tag {
	border: 1px solid var(--line);
	padding: 0 0.5em;
	font-size: 0.9em;
	color: var(--amber);
}

.code-block pre {
	margin: 0;
	padding: var(--space-3);
	border: none;
	overflow-x: auto;
	line-height: 1.5;
}

.code-block code { font-family: var(--font-mono); }

/* syntax token palette — warm CRT hues, no cool blues */
.code-block .comment  { color: rgba(255, 184, 102, 0.45); font-style: italic; }
.code-block .string   { color: var(--green); }
.code-block .number   { color: var(--yellow); }
.code-block .keyword  { color: var(--amber-bright); font-weight: 700; }
.code-block .function { color: var(--amber); }
.code-block .type     { color: var(--yellow); }
.code-block .variable { color: var(--text-bright); }

/* tables */
.table-wrapper { overflow-x: auto; margin: 0 0 var(--space-4); }

table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.85rem;
}

th, td {
	border: 1px solid var(--line);
	padding: 0.5em 0.9em;
	text-align: left;
}

th {
	background: var(--bg-raised);
	color: var(--amber);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: 0.8rem;
}

tbody tr:hover { background: var(--amber-faint); }

code {
	font-family: var(--font-mono);
	background: var(--amber-faint);
	padding: 0.1em 0.35em;
	font-size: 0.9em;
}

pre code { background: none; padding: 0; }

/* simple legacy grid used by a few articles */
.row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	margin: 0 0 var(--space-4);
}

.row > * { flex: 1 1 20rem; min-width: 0; }

/* playable game embed cards */
.game-play-container { margin: 0 0 var(--space-4); }

.game-preview {
	position: relative;
	border: 1px solid var(--line);
	overflow: hidden;
}

.game-preview > img { width: 100%; }

.play-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	text-align: center;
	padding: var(--space-3);
	background: rgba(5, 4, 3, 0.82);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.game-preview:hover .play-overlay,
.game-preview:focus-within .play-overlay { opacity: 1; }

.play-overlay h3 { margin: 0; text-shadow: var(--glow-strong); }
.play-overlay p { margin: 0; font-size: 0.9rem; }

.button.play-button {
	background: var(--amber);
	color: #000;
	font-weight: 700;
}

/* FA5: github glyph lives in the brands face */
.icon.fa-github::before { font-family: "Font Awesome 5 Brands"; font-weight: 400; }

/* touch devices have no hover: the Play button must always be visible,
   or it is simply unreachable on a phone */
@media (hover: none) {
	.play-overlay {
		opacity: 1;
		position: static;
		background: var(--bg-raised);
		border-top: 1px solid var(--line);
	}
}

@media (prefers-reduced-motion: reduce) {
	.play-overlay { opacity: 1; transition: none; }
}

/* ========================================================================
   11. Footer
   ======================================================================== */

.site-footer {
	border-top: 1px solid var(--line);
	padding: var(--space-4);
	text-align: center;
	font-size: 0.8rem;
	color: var(--amber-dim);
}

.site-footer .session-line { margin-top: var(--space-1); margin-bottom: 0; max-width: none; }

/* ========================================================================
   12. Responsive + motion
   ======================================================================== */

@media (max-width: 44rem) {
	body { font-size: 15px; }

	.site-header { flex-wrap: wrap; }

	/* shorten the prompt so long article slugs keep their blinking cursor */
	.site-title .prompt { display: none; }
	.site-title::before { content: "~$\00a0"; color: var(--amber-dim); }

	.nav-toggle { display: inline-block; }

	.site-nav {
		display: none;
		flex-basis: 100%;
		flex-direction: column;
		padding-top: var(--space-2);
	}

	.site-nav.open { display: flex; }

	.site-nav a { padding: 0.5em 0.6em; border-bottom: 1px dashed var(--line); }

	.console-grid { grid-template-columns: 1fr; }

	main { padding: var(--space-4) var(--space-3) var(--space-5); }

	.page-hero { padding: var(--space-3); }
}

/* ------------------------------------------------------------------
   Touch targets: on coarse pointers every control gets a ~44px hit
   area. Scoped to (pointer: coarse) so the dense desktop look is kept.
   ------------------------------------------------------------------ */
@media (pointer: coarse) {
	.site-nav a,
	.nav-toggle,
	.hero-links a,
	.article-nav a,
	.button,
	.pdf-download a,
	.contact-item a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding-top: 0.35em;
		padding-bottom: 0.35em;
	}

	.site-title { min-height: 44px; display: inline-flex; align-items: center; }

	/* card "$ Learn more" links: full-width tap row at the foot of the card */
	.console-body .go {
		display: flex;
		align-items: center;
		align-self: stretch;
		min-height: 44px;
		border-bottom: none;
		border-top: 1px solid var(--line);
		padding-top: var(--space-2);
		margin-top: var(--space-2);
	}

	.article-nav ul { gap: var(--space-2); }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	.ticker-track { animation: none; flex-wrap: wrap; }
	.ticker { overflow-x: auto; }

	.cursor,
	.console-bar::after,
	.ticker-item .dot { animation: none; }

	.console,
	.console-media img { transition: none; }

	.console:hover { transform: none; }
	.console:hover .console-media img { transform: none; }
}