/*
* Jonathan Kim's links page: custom layout on top of LittleLink.
* Loaded last, so these rules win over style.css and brands.css.
*/

:root {
	/* The two main site colors */
	--accent:#31A7EB;         /* sky blue: avatar, focus rings */
	--page-bg:#FFFFFF;        /* white page background */

	/* Supporting shades derived from them */
	--accent-strong:#0F6FA8;  /* darker blue for small text, readable on light backgrounds */
	--accent-soft:#E3F3FC;    /* pale blue badge background */
	--card-bg:#ffffff;
	--card-border:#DCDCDC;
	--text:#111418;
	--text-muted:#5b6370;
	--radius:1rem;
}

body {
	background-color:var(--page-bg);
	color:var(--text);
}

/* Narrower column: cards read better at phone-like widths, even on desktop */
.container {
	max-width:30rem;          /* 480px */
	width:100%;
	text-align:left;
	padding-top:max(var(--spacing-m), env(safe-area-inset-top));
}

/* Profile header: avatar on the left, name and bio on the right
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.profile {
	display:flex;
	align-items:center;
	gap:var(--spacing-s);
	padding-bottom:var(--spacing-m);
	margin-bottom:var(--spacing-m);
	border-bottom:1px solid var(--card-border);
}
.profile .avatar {
	width:3.5rem;             /* 56px */
	height:3.5rem;
	margin:0;
	flex-shrink:0;
}
.profile h1 {
	margin:0;
	font-size:1.375rem;       /* 22px */
	line-height:1.2;
	letter-spacing:-0.03em;   /* tighter: monospace letters sit far apart at large sizes */
	hyphens:none;
}
.container .profile p {
	margin:0.125rem 0 0 0;
	font-size:0.9375rem;      /* 15px */
	color:var(--text-muted);
	line-height:1.4;
}

/* Section label
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.section-label {
	margin:0 0 var(--spacing-xs) 0;
	font-size:0.8125rem;      /* 13px */
	font-weight:700;
	letter-spacing:0.08em;
	text-transform:uppercase;
	color:var(--text-muted);
}

/* Project cards (newest first)
   Big image on top, then a bar with the name (left) and GitHub link (right).
   The name link stretches over the whole card, so tapping anywhere opens
   the project. The GitHub link sits above that layer and opens the repo.
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.project-list {
	display:flex;
	flex-direction:column;
	gap:var(--spacing-m);
	margin:0;
	padding:0;
	list-style:none;
}
.project-list li {
	margin:0;
}
.project-card {
	position:relative;
	overflow:hidden;
	background:var(--card-bg);
	border:1px solid var(--card-border);
	border-radius:var(--radius);
	box-shadow:0 1px 3px rgba(16,24,40,0.06);
	transition:transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
@media (hover:hover) {
	.project-card:hover {
		border-color:#c4c4c4;
		box-shadow:0 8px 24px rgba(16,24,40,0.10);
		transform:translateY(-2px);
	}
}
.project-card:active {
	transform:scale(0.985);
}
/* Focus ring only for keyboard users. (:focus-within also lit up after a tap on phones.) */
.project-card:has(.project-name:focus-visible) {
	outline:2px solid var(--accent);
	outline-offset:2px;
}

/* Pixel kitten that walks along the top edge of the first card
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.project-list li {
	position:relative;
}
.project-list li.has-kitten {
	margin-top:1.5rem;        /* room above the card for the kitten */
}
.kitten {
	--kitten-w:30.6px;        /* 16 x 12 pixel art at about 1.9x */
	position:absolute;
	bottom:100%;              /* paws stand exactly on top of the card's border */
	left:1rem;
	z-index:3;
	width:var(--kitten-w);
	height:calc(var(--kitten-w) * 0.75);
	image-rendering:pixelated;
	pointer-events:none;
	animation:kitten-walk 18s linear infinite;
}
/* Walk right, pause, turn around, walk left, pause, turn again */
@keyframes kitten-walk {
	0%     { left:1rem;                                 transform:scaleX(1); }
	45%    { left:calc(100% - 1rem - var(--kitten-w));  transform:scaleX(1); }
	49.9%  { left:calc(100% - 1rem - var(--kitten-w));  transform:scaleX(1); }
	50%    { left:calc(100% - 1rem - var(--kitten-w));  transform:scaleX(-1); }
	95%    { left:1rem;                 transform:scaleX(-1); }
	99.9%  { left:1rem;                 transform:scaleX(-1); }
	100%   { left:1rem;                 transform:scaleX(1); }
}
@media (prefers-reduced-motion:reduce) {
	.kitten { animation:none; }   /* sits still at the left */
}

.project-image {
	display:block;
	width:100%;
	height:auto;              /* ignore the height attribute; aspect-ratio sets the height */
	aspect-ratio:16 / 11;     /* taller than the 16:10 screenshot, filling the space the short bar gave up */
	object-fit:cover;
	object-position:top center;
	background:#f2f2f2;       /* shows while the image loads */
	border-bottom:1px solid var(--card-border);
}

.project-bar {
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:var(--spacing-s);
	padding:0.34375rem 1rem;  /* 5.5px top and bottom: bar is 49px tall */
}

.project-name {
	display:flex;
	align-items:center;
	gap:0.5rem;
	min-width:0;
	font-size:0.95625rem;     /* 15.3px */
	font-weight:700;
	line-height:1.3;
	color:var(--text);
	text-decoration:none;
	-webkit-tap-highlight-color:transparent;
}
.project-name:hover {
	color:var(--text);
}
.project-name:focus-visible {
	outline:none;             /* the card shows the focus ring instead */
}
/* Stretch the name link over the whole card */
.project-name::after {
	content:"";
	position:absolute;
	inset:0;
	z-index:1;
}

.project-repo {
	position:relative;
	z-index:2;                /* above the stretched link, so it gets its own taps */
	display:inline-flex;
	align-items:center;
	gap:0.375rem;
	flex-shrink:0;
	min-height:2.375rem;      /* 38px tap target */
	padding:0 0.75rem;
	font-size:0.875rem;       /* 14px */
	font-weight:700;
	color:var(--text);
	text-decoration:none;
	border:1px solid var(--card-border);
	border-radius:0.5rem;     /* box with slightly rounded corners */
	-webkit-tap-highlight-color:transparent;
}
.project-repo:hover {
	color:var(--text);
}
@media (hover:hover) {
	.project-repo:hover {
		background:#f4f4f4;
	}
}
.project-repo:active {
	background:#ececec;
}
.project-repo:focus-visible {
	outline:2px solid var(--accent);
	outline-offset:2px;
}
.project-repo svg {
	width:1.125rem;
	height:1.125rem;
}

/* Social row under the projects
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.social {
	margin-top:var(--spacing-l);
}
.social .button {
	width:100%;
	margin:0;
	border-radius:var(--radius);
}

footer {
	text-align:center;
	color:var(--text-muted);
	font-size:0.8125rem;
}
footer a {
	color:var(--text-muted);
}