/* ============================================
   Daniel De Laney — V2 Unified Stylesheet
   Dark theme, green accent, terminal aesthetic
   ============================================ */

/* --- Design tokens --- */
:root {
	/* Color: ink */
	--ink-bg:        #000;
	--ink-line:   #222;

	/* Color: text */
	--text-strong:   #fff;
	--text-muted:    #999;
	--text-faint:    #666;

	/* Color: terminal-green accent */
	--accent:        #00FF6F;
	--accent-40:     rgba(0, 255, 111, 0.40);
	--accent-10:     rgba(0, 255, 111, 0.10);

	/* Shadow / overlay tint, paired with the .veil class */
	--shadow-color:  rgba(0, 0, 0, 0.75);
	--veil-blur:     6px;

	/* Type: families */
	--font-body:     "Source Sans 3", sans-serif;
	--font-mono:     "Source Code Pro", monospace;

	/* Type: scale (relative to 18px body) */
	--fs-sm:   0.75em;
	--fs-base: 1em;
	--fs-md:   1.1em;
	--fs-lg:   1.5em;
	--fs-xl:   2.2em;
	--fs-2xl:  3em;
	--fs-hero: clamp(2em, 1em + 2.6vw, 3.4em);

	/* Type: tracking (uppercase eyebrows, badges) */
	--track-caps: 0.08em;

	/* Type: line-height */
	--lh-tight: 1.2;
	--lh-base:  1.5;

	/* Type: root size — overridden in 120em+ media query */
	--root-size: 18px;

	/* Spacing scale (raw values; use rhythm vocabulary for vertical gaps) */
	--sp-1: 0.3em;
	--sp-2: 0.6em;
	--sp-3: 1em;
	--sp-4: 1.5em;
	--sp-5: 2em;
	--sp-6: 3em;
	--sp-7: 6em;
	--sp-8: 9em;

	/* Vertical rhythm vocabulary — every margin/gap that creates rhythm
	   references one of these; raw --sp-* is for component padding and
	   the tight one-offs that don't rise to "rhythm" (figcaption, li→li). */
	--rhythm-pair:  var(--sp-2);  /* heading→content, sample→caption */
	--rhythm-row:   var(--sp-3);  /* between siblings: .stack, p→p */
	--rhythm-block: var(--sp-5);  /* between distinct blocks: lede→content, images, sections */
	--rhythm-page:  var(--sp-7);  /* page-level: main edges, major breaks */

	/* Layout */
	--measure:      38em;
	--measure-wide: 64em;
	--measure-hero: 16em;
	--gutter:       2em;

	/* Borders */
	--border-thin:  1px;
	--border-thick: 3px;

	/* Geometry */
	--aspect-card:  16 / 9;

	/* Interaction */
	--lift:      -2px;  /* hover lift on all .card variants */
	--hover-dim: 0.6;   /* hover opacity on icon-only buttons */

	/* Motion */
	--ease-out:  cubic-bezier(.2, .7, .2, 1);
	--dur-fast:  120ms;
	--dur-med:   220ms;
	--dur-slow:  420ms;
}

/* --- Reset --- */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	font-size: inherit;
}

/* --- Base --- */
body {
	font-family: var(--font-body);
	font-size: var(--root-size);
	line-height: var(--lh-base);
	color: var(--text-muted);
	background: var(--ink-bg);
	padding: 0;
	-webkit-font-smoothing: antialiased;
}

::selection {
	color: black;
	background-color: var(--accent);
}

/* --- Typography --- */
h1, h2, h3, h4 {
	font-family: var(--font-mono);
	font-weight: normal;
	color: var(--text-strong);
	line-height: var(--lh-tight);
	text-wrap: balance;
}

h1 {
	font-size: var(--fs-xl);
	margin-bottom: var(--rhythm-pair);
}

h2 {
	font-size: var(--fs-lg);
	margin: var(--rhythm-block) 0 var(--rhythm-pair) 0;
}

h4 {
	color: var(--accent);
	font-size: var(--fs-base);
	font-weight: bold;
}

p {
	margin-bottom: var(--rhythm-row);
	max-width: var(--measure);
}

strong {
	font-weight: bold;
	color: var(--text-strong);
}

em {
	font-style: italic;
}

a {
	color: var(--accent);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

/* Animated underline for inline text links */
p a, article li a, footer .cta a {
	text-decoration: none;
	background-image: linear-gradient(var(--accent), var(--accent));
	background-size: 0% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size var(--dur-med) var(--ease-out);
}

p a:hover, article li a:hover, footer .cta a:hover {
	text-decoration: none;
	background-size: 100% 1px;
}

ul, ol {
	margin-bottom: var(--rhythm-row);
	padding-left: var(--sp-4);
}

ul {
	list-style: square;
}

blockquote {
	border-left: var(--border-thick) solid var(--accent-40);
	padding: 0 var(--sp-4);
	margin: var(--rhythm-block) 0;
	color: var(--text-strong)
}

.callout {
	border-left-color: var(--accent);
	background: var(--accent-10);
	padding: var(--sp-3) var(--sp-4);
}

.callout strong {
	color: var(--accent);
}

code {
	font-family: var(--font-mono);
	background: var(--accent-10);
	color: var(--accent);
	padding: 0 var(--sp-1);
}

/* --- Layout primitives --- */
.stack {
	display: flex;
	flex-direction: column;
	gap: var(--rhythm-row);
}

/* Small mono caption: dates, meta values, eyebrows. */
.meta {
	display: block;
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	color: var(--text-faint);
}

/* Intro paragraph after a page or section heading. */
.lede {
	max-width: var(--measure);
	margin-bottom: var(--rhythm-block);
	color: var(--text-muted);
}

img, video {
	display: block;
	width: 100%;
	height: auto;
	margin: var(--rhythm-block) 0;
}

/* Fade in lazy images on load */
img[loading="lazy"] {
	opacity: 0;
	transition: opacity var(--dur-slow) var(--ease-out);
}

img[loading="lazy"].loaded {
	opacity: 1;
}

/* Carousel controls its own opacity */
.carousel-slide[loading="lazy"] {
	transition: opacity var(--dur-med) var(--ease-out);
}

.carousel-slide[loading="lazy"].loaded {
	opacity: 0;
}

.carousel-slide[loading="lazy"].loaded.active {
	opacity: 1;
}

/* --- Header --- */
header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 1em var(--gutter);
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: var(--border-thin) solid var(--ink-line);
}

header .logo {
	font-family: var(--font-mono);
	font-weight: bold;
	background: var(--accent);
	color: var(--ink-bg);
	padding: var(--sp-1) var(--sp-2);
	font-size: var(--fs-sm);
	text-decoration: none;
	transition: background-color var(--dur-fast);
}

header .logo .logo-mini { display: none; }
@media (max-width: 33.75em) {
	header .logo .logo-full { display: none; }
	header .logo .logo-mini { display: inline; }
}

header .logo:hover {
	background: var(--text-strong);
}

header nav {
	display: flex;
	gap: var(--sp-4);
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
}

header nav a {
	color: var(--text-faint);
	transition: color var(--dur-fast);
}

header nav .email .email-short { display: none; }
@media (max-width: 23.75em) {
	header nav .email .email-full { display: none; }
	header nav .email .email-short { display: inline; }
}

header nav a:hover {
	color: var(--accent);
	text-decoration: none;
}


/* --- Main content --- */
main {
	max-width: var(--measure);
	margin: 0 auto;
	padding: var(--rhythm-page) var(--gutter) 0 var(--gutter);
}

/* --- Footer --- */
footer {
	font-family: var(--font-mono);
	text-align: center;
	margin-top: var(--rhythm-page);
}

footer .cta {
	padding: var(--rhythm-page) var(--gutter);
	border-top: var(--border-thin) solid var(--accent-40);
}

footer .cta h2 {
	margin-bottom: var(--rhythm-pair);
}

footer .cta p {
	color: var(--text-faint);
	max-width: none;
	margin-bottom: 0;
}

footer .cta a {
	color: var(--accent);
	font-weight: bold;
}

footer .footer-links {
	padding: var(--gutter);
	font-size: var(--fs-sm);
	display: flex;
	gap: var(--sp-4);
	flex-wrap: wrap;
}

footer .footer-links a {
	color: var(--text-faint);
	transition: color var(--dur-fast);
}

footer .footer-links a:hover {
	color: var(--accent);
}

/* ============================================
   Card (shared component)
   ============================================ */
.card {
	display: block;
	padding: var(--sp-4);
	border: var(--border-thin) solid var(--accent-40);
	color: inherit;
	text-decoration: none;
	transition: border-color var(--dur-med), background-color var(--dur-med), transform var(--dur-med);
}

.card:hover,
.card:focus-visible {
	background: var(--accent-10);
	border-color: var(--accent);
	transform: translateY(var(--lift));
	text-decoration: none;
}

/* ============================================
   Homepage
   ============================================ */
.hero {
	font-family: var(--font-mono);
	font-size: var(--fs-hero);
	color: var(--text-strong);
	margin-top: var(--rhythm-block);
	margin-bottom: var(--rhythm-block);
	max-width: var(--measure-hero);
	font-weight: normal;
	line-height: var(--lh-tight);
	text-wrap: balance;
}

/* App cards */
.apps {
	margin-bottom: var(--rhythm-page);
}

.apps > .more-link {
	margin-top: var(--rhythm-block);
}

.apps-grid {
	gap: var(--rhythm-block);
}

.app-card {
	display: block;
	position: relative;
	text-decoration: none;
	transition: transform var(--dur-med);
}

.app-card:hover {
	text-decoration: none;
	transform: translateY(var(--lift));
}

.app-card .app-vignette {
	display: flex;
	aspect-ratio: var(--aspect-card);
	padding: var(--sp-2) var(--sp-3);
	border: var(--border-thin) solid var(--accent-40);
	overflow: hidden;
	position: relative;
	transition: border-color var(--dur-med), background-color var(--dur-med);
	user-select: none;
}
.app-card:hover .app-vignette {
	border-color: var(--accent);
	background-color: var(--accent-10);
}

.app-card .app-text {
	margin-top: var(--rhythm-row);
}

.app-card h2 {
	margin: 0 0 var(--rhythm-pair) 0;
	color: var(--accent);
}

.app-card p {
	color: var(--text-muted);
	margin-bottom: 0;
}

/* Vignette animations live in /css/home-vignettes.css (loaded only on the homepage). */

/* Writing list */
.writing-list {
	list-style: none;
	padding: 0;
	margin-bottom: var(--rhythm-page);
}

.writing-list .date {
	margin-top: var(--rhythm-pair);
}

/* --- Responsive: wide --- */
@media (min-width: 75em) {
	.home main {
		max-width: var(--measure-wide);
	}

	.apps-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--sp-4);
	}

	.writing-list .date {
		float: right;
		margin-top: 0;
	}
}

@media (min-width: 120em) {
	:root {
		--root-size: 22px;
	}
}

/* Case study badge */
.badge {
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	text-transform: uppercase;
	letter-spacing: var(--track-caps);
	font-weight: bold;
	color: var(--accent);
	margin-bottom: var(--rhythm-row);
}

/* Carousel (for case studies) */
.carousel {
	position: relative;
	margin: var(--rhythm-block) 0;
}

.carousel-container {
	position: relative;
	aspect-ratio: var(--aspect-card);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	cursor: zoom-in;
}


.carousel-slide {
	position: absolute;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	opacity: 0;
	transition: opacity var(--dur-med) var(--ease-out);
	margin: 0;
	box-shadow: none;
}

.carousel-slide.active {
	opacity: 1;
}

.carousel-controls {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: var(--rhythm-row);
}

.carousel-nav {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
}

.carousel-btn {
	background: transparent;
	border: none;
	color: var(--accent);
	padding: 0;
	cursor: pointer;
	font-family: var(--font-mono);
	font-size: var(--fs-sm);
	font-weight: bold;
}

.carousel-btn:hover {
	opacity: var(--hover-dim);
}

.carousel-counter {
	color: var(--text-faint);
	font-size: var(--fs-sm);
}

.carousel.fullscreen {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	background: var(--ink-bg);
	margin: 0;
	padding: var(--gutter);
	display: flex;
	flex-direction: column;
	animation: fadeIn var(--dur-fast) var(--ease-out);
}

.carousel.fullscreen .carousel-container {
	flex: 1;
	aspect-ratio: unset;
	background: var(--ink-bg);
	cursor: zoom-out;
}

/* Veil: darken + blur whatever sits behind. Pair with positioning at the call site. */
.veil {
	background: var(--shadow-color);
	backdrop-filter: blur(var(--veil-blur));
}

/* Lightbox */
.lightbox {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--gutter);
	cursor: zoom-out;
	animation: fadeIn var(--dur-fast) var(--ease-out);
}

.lightbox img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	box-shadow: none;
	margin: 0;
}

/* ============================================
   Work/portfolio index page
   ============================================ */
.project {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--sp-4);
}

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

.project h4 {
	margin-bottom: var(--rhythm-pair);
}

.project p {
	color: var(--text-faint);
	margin-bottom: 0;
}

@media (max-width: 40em) {
	.project {
		flex-direction: column;
		align-items: stretch;
		gap: var(--rhythm-row);
	}
}

/* ============================================
   Animation
   ============================================ */
.fade {
	opacity: 0;
	animation: fadeIn var(--dur-slow) forwards;
}

@keyframes fadeIn {
	to { opacity: 1; }
}

/* ============================================
   Case-study article idioms
   ============================================ */

img.bordered {
	border: var(--border-thin) solid var(--ink-line);
}

article img:not(.carousel-slide) {
	cursor: zoom-in;
}

article a img:not(.carousel-slide) {
	cursor: pointer;
}

.more-link {
	margin: var(--rhythm-page) 0;
}

/* Centered variant — used at the foot of every case study */
.more-link--center {
	text-align: center;
	margin-bottom: var(--sp-8);
}

.more-link a {
	display: inline-block;
	font-family: var(--font-mono);
	text-transform: uppercase;
	font-weight: bold;
	font-size: var(--fs-sm);
	background: var(--accent);
	color: var(--ink-bg);
	padding: var(--sp-1) var(--sp-2);
	letter-spacing: var(--track-caps);
	text-decoration: none;
	background-image: none;
	border-bottom: none;
	transition: background-color var(--dur-fast);
}

.more-link a:hover {
	background: var(--text-strong);
	background-image: none;
}

/* Case study back-link in badge style (top of post) */
.badge-link {
	display: inline-block;
	text-decoration: none;
	transition: color var(--dur-fast);
}

.badge-link:hover {
	text-decoration: none;
	color: var(--text-strong);
}


/* Home writing cards */
.writing-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--rhythm-row);
	margin-bottom: var(--rhythm-row);
}

.writing-card-quote {
	font-family: var(--font-mono);
	font-size: var(--fs-md);
	line-height: var(--lh-base);
	color: var(--text-strong);
	margin: 0 0 var(--rhythm-row) 0;
	max-width: none;
	text-wrap: balance;
}

.writing-card-quote-mark {
	color: var(--accent);
	margin-right: var(--sp-1);
}

.writing-card-title {
	display: block;
	font-family: var(--font-body);
	font-size: var(--fs-base);
	color: var(--accent);
}

@media (min-width: 48em) {
	.writing-cards {
		grid-template-columns: 1fr 1fr;
		gap: var(--rhythm-row);
	}
}