/* card.css — the only non-vendored stylesheet on this site.
 *
 * Layout and branding for the "Digital Card" design: a narrow column of
 * paper panels on the portfolio's warm radial ground. Only reset.css loads
 * before this; the LittleLink style.css / brands.css stay vendored on disk
 * but are not linked, since this layout has no button stack.
 *
 * Palette and fonts come from what portfolio.ellizg.com RENDERS (its served
 * /css/site.css, the [data-palette="terracotta"] set):
 *   papers  #FAF7F1 / #F0EAE0 / #E4DCD0 / #D8CFC1
 *   ink     #191510      accent #B8452F     accent-deep #93341F
 *   second  #7A6A57      line rgba(25,21,16,.14)
 *   fonts   Newsreader (display, with italic), IBM Plex Sans (body),
 *           IBM Plex Mono (small labels)
 *
 * Keep all styling in a stylesheet file: the serving nginx base sets
 * style-src 'self' with no 'unsafe-inline', so a style="..." attribute would be
 * blocked by the browser. Scripts are allowed only from analytics.cubeos.app.
 */

/* Fonts, vendored from the portfolio repo (origin/main:static/fonts).
 * Latin subset only. */
@font-face {
	font-family: 'Newsreader';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url("../fonts/f24c3215.woff2") format('woff2');
}
@font-face {
	font-family: 'Newsreader';
	font-style: italic;
	font-weight: 400 600;
	font-display: swap;
	src: url("../fonts/97c9a2c1.woff2") format('woff2');
}
@font-face {
	font-family: 'IBM Plex Sans';
	font-style: normal;
	font-weight: 400 600;
	font-display: swap;
	src: url("../fonts/868a235a.woff2") format('woff2');
}
@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/e2661bcc.woff2") format('woff2');
}
@font-face {
	font-family: 'IBM Plex Mono';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/0bc96cd0.woff2") format('woff2');
}

:root {
	--paper-a:#FAF7F1;
	--paper-b:#F0EAE0;
	--paper-c:#E4DCD0;
	--paper-d:#D8CFC1;
	--ink:#191510;
	--ink-rgb:25, 21, 16;
	--accent:#B8452F;
	--accent-deep:#93341F;
	--second:#7A6A57;
	--line:rgba(var(--ink-rgb), 0.14);
	--line-soft:rgba(var(--ink-rgb), 0.08);
	--radius:6px;
	--display:'Newsreader', Georgia, serif;
	--sans:'IBM Plex Sans', system-ui, -apple-system, sans-serif;
	--mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* ── Ground ──────────────────────────────────────────────────────── */

html {
	background-color:var(--paper-c);
	background-image:radial-gradient(ellipse 90% 70% at 50% 30%,
		var(--paper-a) 0%, var(--paper-b) 38%, var(--paper-c) 70%, var(--paper-d) 100%);
	background-attachment:fixed;
	min-height:100%;
	-webkit-text-size-adjust:100%;
}

body {
	margin:0;
	min-height:100vh;
	padding:2rem 1rem 3rem;
	color:var(--ink);
	font-family:var(--sans);
	font-size:1rem;
	line-height:1.5;
	-webkit-font-smoothing:antialiased;
}

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

.card {
	max-width:28rem;
	margin:0 auto;
	display:flex;
	flex-direction:column;
	gap:1rem;
}

/* ── Panels ──────────────────────────────────────────────────────── */

.panel {
	background:var(--paper-a);
	border:1px solid var(--line);
	border-radius:var(--radius);
	box-shadow:0 1px 2px rgba(var(--ink-rgb), 0.04), 0 8px 24px -16px rgba(var(--ink-rgb), 0.18);
	overflow:hidden;
}

.panel--muted {
	background:var(--paper-b);
}

.strip {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:1rem;
	padding:0.7rem 1rem;
	background:var(--paper-b);
	border-bottom:1px solid var(--line);
}

.strip-title,
.strip-meta,
.label {
	font-family:var(--mono);
	font-size:0.6875rem;
	font-weight:500;
	letter-spacing:0.12em;
	text-transform:uppercase;
	color:var(--second);
	margin:0;
}

.strip-title {
	display:inline-flex;
	align-items:center;
	gap:0.5rem;
	color:var(--ink);
}

.dot {
	width:0.5rem;
	height:0.5rem;
	border-radius:50%;
	background:var(--accent);
	flex:none;
}

/* ── Identity ────────────────────────────────────────────────────── */

.identity {
	display:grid;
	grid-template-columns:auto 1fr;
	column-gap:1rem;
	row-gap:1rem;
	align-items:center;
	padding:1.25rem 1.25rem 1.5rem;
}

.portrait {
	width:6rem;
	height:6rem;
	border-radius:50%;
	object-fit:cover;
	border:1px solid var(--line);
	display:block;
}

.identity-text .label {
	margin-bottom:0.35rem;
}

h1 {
	font-family:var(--display);
	font-weight:400;
	font-size:2rem;
	line-height:1.05;
	letter-spacing:-0.01em;
	color:var(--accent);
	margin:0;
}

h1 em {
	font-style:italic;
}

.tagline {
	grid-column:1 / -1;
	margin:0;
	font-size:1rem;
	line-height:1.5;
	color:var(--second);
}

/* ── Contact grid ────────────────────────────────────────────────── */

.contact {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:1.25rem 1rem;
	padding:1.25rem 1rem 1rem;
	border-top:1px solid var(--line);
}

.contact-item {
	display:flex;
	flex-direction:column;
	gap:0.2rem;
	min-width:0;
}

.contact-item .value {
	font-size:0.95rem;
	color:var(--ink);
	overflow-wrap:anywhere;
	transition:color 0.15s ease;
}

.contact-item:hover .value {
	color:var(--accent);
}

.save {
	grid-column:1 / -1;
	display:block;
	margin-top:0.25rem;
	padding:0.95rem 1rem;
	background:var(--ink);
	color:var(--paper-a);
	border-radius:4px;
	text-align:center;
	font-weight:500;
	font-size:0.95rem;
	transition:background-color 0.15s ease, transform 0.15s ease;
}

.save:hover {
	background:var(--accent-deep);
	transform:translateY(-1px);
}

/* ── Projects ────────────────────────────────────────────────────── */

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

.project {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:1rem;
	padding:1rem;
	border-top:1px solid var(--line-soft);
}

.project:first-child {
	border-top:0;
}

.project-name {
	font-family:var(--display);
	font-size:1.375rem;
	line-height:1.2;
	color:var(--ink);
	transition:color 0.15s ease;
}

.project-name:hover {
	color:var(--accent);
}

.project-links {
	display:flex;
	flex-direction:column;
	align-items:flex-end;
	gap:0.1rem;
	font-family:var(--mono);
	font-size:0.75rem;
	color:var(--second);
	text-align:right;
}

.project-links a:hover {
	color:var(--accent);
	text-decoration:underline;
	text-underline-offset:0.2em;
}

/* ── Footer ──────────────────────────────────────────────────────── */

.foot {
	text-align:center;
	font-family:var(--mono);
	font-size:0.8125rem;
	color:var(--second);
	padding-top:0.25rem;
}

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

/* ── Small screens ───────────────────────────────────────────────── */

@media (max-width: 26rem) {
	body {
		padding:1rem 1rem 2rem;
	}
	.identity {
		padding:1.25rem 1rem;
	}
	h1 {
		font-size:1.75rem;
	}
	.strip-meta {
		white-space:nowrap;
	}
}

@media (max-width: 22rem) {
	.contact {
		grid-template-columns:1fr;
	}
}