/* hello.aaronwells.me: Aaron's business card. Same system as aaronwells.me ("The Clipping").
   The tokens below are copied in from src/css/main.css by tools/hello.py; do not edit them here. */
@layer tokens {
	:root {
		color-scheme: light dark;

		--paper: oklch(97.5% 0.008 85);
		--paper-2: oklch(94.5% 0.012 85);
		--ink: oklch(22% 0.012 60);
		--ink-2: oklch(42% 0.014 60);
		--rule: oklch(84% 0.012 80);
		--accent: oklch(50% 0.17 264);
		--signal: oklch(66% 0.16 48);
		--card: oklch(98.5% 0.006 85);

		--font-text: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
		--font-display: "Gambetta", "Newsreader", "Iowan Old Style", Georgia, serif;
		--font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

		--fs-body: clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
		--fs-small: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
		--fs-label: clamp(0.72rem, 0.68rem + 0.15vw, 0.8rem);
		--fs-h1: clamp(2.5rem, 1.6rem + 4vw, 4.25rem);
		--fs-dek: clamp(1.2rem, 1.05rem + 0.7vw, 1.55rem);
		--fs-quote: clamp(1.3rem, 1.1rem + 0.9vw, 1.9rem);
		--fs-h2: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);

		--measure: 62ch;
		--lh: 1.55;

		--s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem;
		--s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem;

		--radius: 2px;
		--dur-fast: 160ms;
		--dur-entry: 600ms;
		--ease: cubic-bezier(.2, .7, .2, 1);
		--gutter: clamp(1rem, 4vw, 3rem);
	}

	@media (prefers-color-scheme: dark) {
		:root:not([data-theme="light"]) {
			--paper: oklch(21% 0.012 70);
			--paper-2: oklch(26% 0.012 70);
			--ink: oklch(91% 0.01 85);
			--ink-2: oklch(72% 0.012 85);
			--rule: oklch(36% 0.012 70);
			--accent: oklch(74% 0.12 264);
			--signal: oklch(74% 0.14 48);
			--card: oklch(97.5% 0.008 85);
		}
	}
	:root[data-theme="light"] { color-scheme: light; }
	:root[data-theme="dark"] {
		color-scheme: dark;
		--paper: oklch(21% 0.012 70);
		--paper-2: oklch(26% 0.012 70);
		--ink: oklch(91% 0.01 85);
		--ink-2: oklch(72% 0.012 85);
		--rule: oklch(36% 0.012 70);
		--accent: oklch(74% 0.12 264);
		--signal: oklch(74% 0.14 48);
		--card: oklch(97.5% 0.008 85);
	}
}
.paper { color-scheme: light; --paper: oklch(97.5% 0.008 85); --paper-2: oklch(94.5% 0.012 85); --ink: oklch(22% 0.012 60); --ink-2: oklch(42% 0.014 60); --rule: oklch(84% 0.012 80); --accent: oklch(50% 0.17 264); --signal: oklch(66% 0.16 48); --card: oklch(98.5% 0.006 85); }

@font-face { font-family: "Gambetta"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/gambetta-normal-500.woff2") format("woff2"); }
@font-face { font-family: "Gambetta"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/gambetta-italic-400.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/newsreader-normal-400-700.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/plexmono-normal-500.woff2") format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; background: var(--paper); }
img, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; }

body {
	background: var(--paper); color: var(--ink);
	font-family: var(--font-text); font-size: var(--fs-body); line-height: 1.4;
	font-optical-sizing: auto; font-kerning: normal; font-variant-numeric: lining-nums;
	text-rendering: optimizeLegibility;
}
::selection { background: var(--signal); color: var(--paper); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: var(--radius); }

/* The desk the card lies on. It follows the reader's light or dark setting; the card itself is paper and stays light,
   like the hedcut on the profile, and so the code keeps the contrast a camera needs. */
.desk {
	min-height: 100svh;
	display: grid; align-content: center; justify-items: center;
	padding: max(var(--s-4), env(safe-area-inset-top)) max(var(--s-4), env(safe-area-inset-right)) max(var(--s-5), env(safe-area-inset-bottom)) max(var(--s-4), env(safe-area-inset-left));
}

.card {
	container-type: inline-size;
	width: min(100%, 26rem);
	background: var(--card); color: var(--ink);
	border: 1px solid var(--rule); border-radius: var(--radius);
}
.face { padding: clamp(1rem, 6cqi, 1.5rem); }

.who { display: grid; grid-template-columns: auto 1fr; gap: clamp(0.75rem, 4.4cqi, 1.25rem); align-items: center; }
.who img { width: clamp(4rem, 25cqi, 8rem); aspect-ratio: 1; object-fit: cover; border-radius: 50%; }
h1 {
	font-family: var(--font-display); font-weight: 500;
	font-size: clamp(1.5rem, 9.4cqi, 3.1rem); line-height: 1; letter-spacing: -0.015em; white-space: nowrap;
}
.org {
	font-family: var(--font-display); font-style: italic; font-weight: 400;
	font-size: clamp(0.95rem, 4.9cqi, 1.35rem); line-height: 1.2; color: var(--ink-2);
	margin-block-start: 0.3rem; text-wrap: balance;
}

.lines { margin-block-start: var(--s-5); border-block-start: 1px solid var(--ink); }
.lines div { border-block-end: 1px solid var(--rule); }
.lines dt, .scan h2 {
	font-family: var(--font-mono); font-weight: 500; font-size: 0.7rem; line-height: 1;
	letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2);
}
.lines dt { padding-block-start: 0.7rem; }
/* The whole row is the link, so the target is a finger wide, not a word wide. */
.lines a {
	display: block; padding-block: 0.3rem 0.65rem;
	color: var(--ink); font-size: clamp(0.9rem, 5.2cqi, 1.25rem); line-height: 1.25;
	overflow-wrap: anywhere;
	text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em;
	text-decoration-color: color-mix(in oklch, var(--accent) 55%, transparent);
	transition: text-decoration-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.lines a:hover { color: var(--accent); text-decoration-color: var(--accent); text-decoration-thickness: 2px; }

.actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-start: var(--s-5); }
.button {
	flex: 1 1 auto;
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 3rem; padding: 0.5em 0.8em;
	background: var(--accent); color: var(--card);
	border: 1px solid var(--accent); border-radius: var(--radius);
	font-family: var(--font-mono); font-weight: 500; font-size: 0.76rem; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap;
	text-decoration: none; cursor: pointer;
	transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.button:hover { background: var(--ink); border-color: var(--ink); }
.button:active { translate: 0 1px; }
.button.quiet { background: transparent; color: var(--ink); border-color: var(--ink); }
.button.quiet:hover { background: var(--ink); color: var(--card); }
.button[hidden] { display: none; }

/* The back of the card: the code. */
.scan {
	display: grid; grid-template-columns: clamp(7.5rem, 40cqi, 9.5rem) 1fr; gap: var(--s-4); align-items: center;
	padding: var(--s-4) clamp(1rem, 6cqi, 1.5rem) clamp(1rem, 6cqi, 1.5rem);
	border-block-start: 1px dashed var(--rule);
}
.code { display: block; border: 1px solid var(--rule); }
.code svg { width: 100%; }
.scan p { font-size: 0.95rem; line-height: 1.3; color: var(--ink-2); margin-block-start: 0.45rem; text-wrap: pretty; }
.scan .enlarge a {
	display: inline-block; padding-block: 0.35rem;
	font-family: var(--font-mono); font-weight: 500; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em;
	text-decoration-color: color-mix(in oklch, var(--accent) 55%, transparent);
}
.scan .enlarge a:hover { text-decoration-color: var(--accent); text-decoration-thickness: 2px; }

/* Wide screens: the card turns landscape, front and back side by side. */
@media (min-width: 48rem) {
	.card { width: min(100%, clamp(46rem, 46vw, 54rem)); display: grid; grid-template-columns: 1fr clamp(17rem, 17vw, 20rem); container-type: normal; }
	.face { container-type: inline-size; padding: var(--s-6); }
	.who img { width: clamp(6.5rem, 26cqi, 8.5rem); }
	h1 { font-size: clamp(2.4rem, 9.4cqi, 3.25rem); }
	.scan {
		grid-template-columns: 1fr; align-content: center; gap: var(--s-4);
		padding: var(--s-6);
		border-block-start: 0; border-inline-start: 1px dashed var(--rule);
	}
	.actions { margin-block-start: var(--s-6); }
}

/* The code alone, as large as the screen allows, for holding a phone out to someone. Opened by the link, no script. */
.sheet { display: none; }
.sheet:target {
	position: fixed; inset: 0; z-index: 5; overflow: auto;
	display: grid; align-content: center; justify-items: center; text-align: center;
	padding: max(var(--s-5), env(safe-area-inset-top)) var(--s-4) max(var(--s-5), env(safe-area-inset-bottom));
	background: #fff; color: var(--ink);
}
.sheet h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.8rem, 1.4rem + 2vw, 2.6rem); line-height: 1; letter-spacing: -0.015em; }
.bigcode { width: min(92vw, 62svh, 34rem); margin-block: var(--s-3) 0; }
.address { font-family: var(--font-mono); font-weight: 500; font-size: 0.85rem; letter-spacing: 0.04em; color: var(--ink-2); }
.sheet .button { margin-block-start: var(--s-5); flex: none; }

/* One moment of motion, as on the profile: the card settles in. */
@media (prefers-reduced-motion: no-preference) {
	.card { transition: opacity var(--dur-entry) var(--ease), translate var(--dur-entry) var(--ease); }
	@starting-style { .card { opacity: 0; translate: 0 0.5rem; } }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Printed, it is a card: no buttons, and the links spelled out already. */
@media print {
	html, body { background: #fff; }
	.desk { min-height: 0; display: block; padding: 0; }
	.card { border-color: #000; break-inside: avoid; }
	.actions, .enlarge, .sheet { display: none !important; }
	.lines a { text-decoration: none; }
}