/* ============================================================
   josephguzik.com
   Two panels: a fixed portrait, a scrolling content column.
   Palette sampled from the portrait — warm gold from the
   sunrise light, teal from the Atlantic.
   ============================================================ */

:root {
	/* surfaces */
	--ink:        #0b0d10;
	--ink-raised: #13161b;
	--rule:       rgba(255, 255, 255, 0.10);
	--rule-soft:  rgba(255, 255, 255, 0.07);

	/* type */
	--paper:  #f1efea;
	--muted:  #b3b9c1;
	--faint:  #868d97;

	/* accents */
	--gold:   #f0b95c;
	--teal:   #6fd0c4;

	/* ---- type scale: six steps, no in-between sizes ---- */
	--t-display: clamp(2.75rem, 4.6vw, 4rem);
	--t-quote:   clamp(1.45rem, 2.2vw, 1.8rem);
	--t-lead:    1.125rem;   /* 18px — role + article titles      */
	--t-body:    1rem;       /* 16px — paragraphs, list items     */
	--t-small:   0.9375rem;  /* 15px — notes, quieter sections    */
	--t-micro:   0.8125rem;  /* 13px — labels, tagline, nav       */

	/* layout */
	--panel:   44vw;
	--measure: 36rem;   /* ~68 characters at --t-body */
	--column:  46rem;   /* outer lane; footer spans this */

	/* Shared alignment: the masthead is exactly this tall, and the
	   content column starts exactly this far down. The top of the photo
	   and the top of the quote therefore land on the same line, which is
	   what makes the two halves read as one composition. */
	--head: 12rem;

	--serif: "Instrument Serif", Georgia, "Times New Roman", serif;
	--sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--mono:  "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
}

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

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

body {
	margin: 0;
	background: var(--ink);
	color: var(--paper);
	font-family: var(--sans);
	font-size: var(--t-body);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* ---------- skip link ---------- */

.skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 0.75rem 1.25rem;
	background: var(--gold);
	color: var(--ink);
	font: 500 var(--t-micro)/1 var(--sans);
	text-decoration: none;
}
.skip:focus { left: 0; }

/* ============================================================
   Portrait panel — fixed, full height
   ============================================================ */

.portrait {
	position: fixed;
	inset: 0 auto 0 0;
	width: var(--panel);
	display: flex;
	flex-direction: column;
	border-right: 1px solid var(--rule);
	background: var(--ink);
}

/* fixed height so the photo below it starts on the shared --head line */
.portrait__masthead {
	flex: none;
	height: var(--head);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 clamp(1.75rem, 3.5vw, 3.25rem);
}

.portrait__name {
	margin: 0;
	font-family: var(--serif);
	font-weight: 400;
	font-size: var(--t-display);
	line-height: 1;
	letter-spacing: -0.015em;
	white-space: nowrap;
}

.portrait__name .family { color: var(--gold); }

.portrait__role {
	margin: 1rem 0 0;
	font-family: var(--mono);
	font-size: var(--t-micro);
	line-height: 1.8;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}

.portrait__role .sep { color: var(--gold); padding: 0 0.35em; }

/* keeps each phrase whole — "Food-first" would otherwise be free to break
   at its hyphen when the panel narrows */
.portrait__role .role__item { white-space: nowrap; }

/* The source photo is landscape (3:2). Sizing the media box by its own
   aspect ratio keeps the crop near the original framing. Tie the cap to
   panel WIDTH, not viewport height, or a tall narrow window crops it down
   to a slice of his face. */
.portrait__media {
	position: relative;
	flex: 1 1 auto;
	width: 100%;
	aspect-ratio: 6 / 5;
	max-height: calc(var(--panel) * 1.15);
	min-height: 0;
	overflow: hidden;
	background: var(--ink-raised);
}

.portrait__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 56% 42%;
}

/* softens the photo's bottom edge into the ink below it */
.portrait__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		var(--ink) 0%,
		rgba(11, 13, 16, 0.55) 7%,
		rgba(11, 13, 16, 0) 22%
	);
}

/* margin-top:auto pins these to the bottom edge, so the panel reads as a
   balanced column: name, photo, links */
.portrait__links {
	flex: none;
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin: 0;
	margin-top: auto;
	padding: clamp(1.25rem, 2.5vw, 1.75rem) clamp(1.75rem, 3.5vw, 3.25rem) clamp(1.75rem, 3.5vw, 3.25rem);
	list-style: none;
	font-family: var(--mono);
	font-size: var(--t-micro);
	letter-spacing: 0.04em;
}

.portrait__links a {
	color: var(--muted);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
	transition: color 0.18s ease, border-color 0.18s ease;
}
.portrait__links a:hover,
.portrait__links a:focus-visible {
	color: var(--teal);
	border-bottom-color: var(--teal);
}

/* ============================================================
   Content column
   ============================================================ */

.content {
	margin-left: var(--panel);
	padding: var(--head) clamp(1.5rem, 4vw, 4rem) 5rem;
}

.content__inner { max-width: var(--column); }

/* one left edge for everything in this column; only the max-width varies */
.section__body,
.quote,
.footer > * { max-width: var(--measure); }

/* ---------- opening pull quote ---------- */

.quote {
	position: relative;
	margin: 0 0 clamp(2.5rem, 5vh, 4rem);
	padding-left: 2.5rem;
	max-width: 40rem;
}

/* hanging quote mark, sized off the text it opens */
.quote::before {
	content: "\201C";
	position: absolute;
	left: 0;
	top: -0.18em;
	font-family: var(--serif);
	font-size: 3.25rem;
	line-height: 1;
	color: var(--gold);
	opacity: 0.6;
}

.quote p {
	margin: 0;
	font-family: var(--serif);
	font-size: var(--t-quote);
	line-height: 1.34;
	letter-spacing: -0.01em;
	color: var(--paper);
	text-wrap: pretty;
}

.quote cite {
	display: block;
	margin-top: 1rem;
	font-family: var(--mono);
	font-size: var(--t-micro);
	font-style: normal;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--faint);
}

.quote cite::before { content: "\2014\00a0"; color: var(--gold); }

/* ---------- sections ---------- */

.section {
	padding: clamp(2.25rem, 5vh, 3.25rem) 0;
	border-top: 1px solid var(--rule-soft);
}

/* one rule per section boundary — the label carries no second hairline */
.section:first-of-type { border-top: 0; padding-top: 0; }

.section__label {
	margin: 0 0 1.35rem;
	font-family: var(--mono);
	font-size: var(--t-micro);
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--teal);
}

.section p { margin: 0 0 1.1rem; color: var(--muted); }
.section p:last-child { margin-bottom: 0; }
.section p strong { color: var(--paper); font-weight: 600; }

/* ---------- links in body copy ---------- */

.section a,
.footer a {
	color: var(--paper);
	text-decoration: none;
	border-bottom: 1px solid rgba(240, 185, 92, 0.45);
	transition: color 0.18s ease, border-color 0.18s ease;
}
.section a:hover,
.section a:focus-visible,
.footer a:hover,
.footer a:focus-visible {
	color: var(--gold);
	border-bottom-color: var(--gold);
}

/* ---------- Now: day job + side projects ---------- */

.role {
	margin: 0 0 2rem;
	padding-left: 1.25rem;
	border-left: 2px solid var(--gold);
}

.role__title {
	margin: 0 0 0.4rem;
	font-size: var(--t-lead);
	font-weight: 600;
	line-height: 1.45;
	color: var(--paper);
}

.role__note { margin: 0; font-size: var(--t-small); color: var(--faint); }

.aside-label {
	margin: 0 0 1rem;
	font-family: var(--serif);
	font-size: var(--t-lead);
	font-style: italic;
	color: var(--faint);
}

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

/* Marker is positioned rather than a flex child: as flex items the text
   nodes and the <a> become separate boxes, which breaks link text onto
   its own line. This keeps each item a single wrapping text run. */
.stack li {
	position: relative;
	padding: 0.45rem 0 0.45rem 1.7rem;
	font-size: var(--t-body);
	line-height: 1.6;
	color: var(--muted);
}

.stack li::before {
	content: "+";
	position: absolute;
	left: 0;
	top: 0.45rem;
	font-family: var(--mono);
	font-weight: 500;
	line-height: 1.6;
	color: var(--gold);
}

/* ---------- Previously / Consuming: tagged rows ---------- */

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

.rows li {
	padding: 0.85rem 0;
	border-bottom: 1px solid var(--rule-soft);
	font-size: var(--t-body);
	line-height: 1.65;
	color: var(--muted);
}
.rows li:first-child { padding-top: 0; }
.rows li:last-child  { border-bottom: 0; padding-bottom: 0; }

.tag {
	display: inline-block;
	margin-right: 0.7rem;
	font-family: var(--mono);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--teal);
	/* optical lift so the small caps sit centred against body text */
	transform: translateY(-1px);
}

/* Consuming carries the least weight on the page — a step down in size,
   not a step down into illegibility */
.section--quiet .rows li {
	font-size: var(--t-small);
	color: var(--faint);
}

/* ---------- Writing ----------
   Currently UNUSED — the Writing section was removed from index.html, but
   is expected back, so these rules are kept deliberately. Do not delete as
   dead code. The markup to restore it is in README.md, under
   "Restoring the Writing section". */

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

.pieces li {
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--rule-soft);
}
.pieces li:first-child { padding-top: 0; }
.pieces li:last-child  { border-bottom: 0; padding-bottom: 0; }

.pieces a {
	display: block;
	border-bottom-color: transparent;
}

.piece__title {
	display: block;
	font-size: var(--t-lead);
	font-weight: 500;
	line-height: 1.45;
	color: var(--paper);
}

.piece__sub {
	display: block;
	margin-top: 0.3rem;
	font-size: var(--t-small);
	line-height: 1.55;
	color: var(--faint);
}

/* underline only the title, not the whole two-line block */
.pieces a:hover .piece__title,
.pieces a:focus-visible .piece__title {
	color: var(--gold);
	box-shadow: inset 0 -1px 0 var(--gold);
}

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

.footer {
	margin-top: clamp(2.5rem, 5vh, 3.5rem);
	padding-top: clamp(2rem, 4vh, 2.75rem);
	border-top: 1px solid var(--rule);
}

/* the closing quote gets the full lane — it reads as a line, not a column */
.footer__quote {
	max-width: none;
	margin: 0 0 1.5rem;
	font-family: var(--serif);
	font-size: clamp(1.2rem, 1.9vw, 1.55rem);
	font-style: italic;
	line-height: 1.4;
	color: var(--muted);
	text-wrap: balance;
}

.footer__meta {
	max-width: none;
	margin: 0;
	font-family: var(--mono);
	font-size: var(--t-micro);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--faint);
}

/* ============================================================
   Focus + motion
   ============================================================ */

:focus-visible {
	outline: 2px solid var(--teal);
	outline-offset: 3px;
	border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}

/* ============================================================
   Narrow screens — portrait becomes a hero, content flows below
   ============================================================ */

@media (max-width: 900px) {
	.portrait {
		position: relative;
		inset: auto;
		width: 100%;
		height: auto;
		border-right: 0;
		border-bottom: 1px solid var(--rule);
	}

	/* the shared --head line only exists in the two-column layout */
	.portrait__masthead {
		height: auto;
		padding: clamp(2rem, 7vw, 2.75rem) clamp(1.25rem, 6vw, 2.5rem) clamp(1.5rem, 5vw, 2rem);
	}

	/* the panel is full-width here, so the width-based cap no longer
	   applies — let the photo take a natural landscape band instead */
	.portrait__media {
		flex: none;
		aspect-ratio: 4 / 3;
		max-height: 58vh;
	}

	.portrait__img { object-position: 56% 34%; }

	.portrait__links { padding: 1.25rem clamp(1.25rem, 6vw, 2.5rem) 1.75rem; }

	.content {
		margin-left: 0;
		padding: clamp(2.5rem, 8vw, 3.5rem) clamp(1.25rem, 6vw, 2.5rem) 3.5rem;
	}

	.content__inner { max-width: none; }
}

@media (max-width: 480px) {
	.portrait__media { aspect-ratio: 5 / 4; }
	.portrait__links { gap: 1.15rem; }

	/* the name is one line by design; let it shrink rather than overflow */
	.portrait__name { font-size: clamp(2.25rem, 12vw, 2.75rem); }
}

/* ============================================================
   Print
   ============================================================ */

@media print {
	body { background: #fff; color: #000; }
	.portrait { position: static; width: 100%; height: auto; border: 0; }
	.portrait__masthead { height: auto; }
	.portrait__img, .portrait__scrim { display: none; }
	.portrait__name, .portrait__name .family { color: #000; }
	.content { margin-left: 0; padding: 0; }
	.section p, .stack li, .rows li { color: #222; }
	.section a { color: #000; border-bottom-color: #999; }
}