/* Tech Cafe overrides.
   Loaded via `styles = ["custom.css"]` in config.toml.
   Everything here overrides Duckquill without touching the submodule, so
   `git submodule update` stays conflict-free. */

/* ---------------------------------------------------------------------------
   SITE FONT
   ---------------------------------------------------------------------------
   Duckquill defines 15 ready-made font stacks in
   themes/duckquill/sass/_variables.scss:101-133. They are pure *system* stacks:
   nothing is downloaded, so pages load instantly -- but each visitor sees the
   first font their own OS happens to have. The "-> X" note below is what each
   one resolves to on macOS; Windows/Linux fall further down the list.

   To change the font: swap the variable name on the `font-family` line at the
   bottom of this block. That single line drives body text AND all headings.

   This site does NOT use one of them any more. `bundled_fonts = true` is set in
   config.toml, so head.html:39-41 loads the theme's real self-hosted webfonts
   from sass/fonts.scss: Inter Variable for text (set below) and JetBrains Mono
   for `pre`/`code`/`kbd`/`samp`. Code blocks need no rule here -- fonts.css
   already claims them, and nothing in this file overrides it. Deliberate: keep
   it that way. Flipping `bundled_fonts` off would silently drop BOTH back to
   system fonts.

   The catalogue below is kept for reference / easy switching back.

     SANS
     --font-rounded-sans          -> SF Rounded      soft + friendly  (was in use)
     --font-system-ui             -> SF Pro          the macOS default
     --font-geometric-humanist    -> Avenir          clean, modern, geometric
     --font-classical-humanist    -> Optima          calligraphic, elegant
     --font-humanist              -> Seravek         warm, readable
     --font-neo-grotesque         -> Helvetica Neue  neutral, corporate
     --font-industrial            -> DIN Alternate   condensed, technical

     SERIF
     --font-transitional          -> Charter         bookish, great for essays
     --font-old-style             -> Iowan Old Style classic, soft serif
     --font-antique               -> Superclarendon  sturdy, slabby
     --font-slab-serif            -> Rockwell        blocky, editorial
     --font-didone                -> Didot           high-contrast, fashion-mag

     NOVELTY
     --font-handwritten           -> Bradley Hand    cursive; hard to read long
     --font-monospace-code        -> SF Mono         terminal look
     --font-monospace-slab-serif  -> Courier New     typewriter

   The `--font-emoji` fallback stays on the end regardless -- it makes emoji in
   headings (the ✮⋆˙ on the homepage) render in colour instead of as glyph boxes.
   --------------------------------------------------------------------------- */
body,
h1, h2, h3, h4, h5, h6 {
	/* Inter, self-hosted by the theme. "Inter Variable" is the family name
	   fonts.scss registers it under -- plain `Inter` only matches if the
	   visitor happens to have it installed locally, which most don't.
	   Requires `bundled_fonts = true` in config.toml.
	   Previously: var(--font-rounded-sans), var(--font-emoji) */
	font-family: "Inter Variable", Inter, var(--font-system-ui),
		var(--font-emoji);
		/*font-family: var(--font-rounded-sans), var(--font-emoji);*/
}

:root {
	/* Softer corners than the 0.75rem default. */
	--rounded-corner: 1rem;
	--rounded-corner-small: 0.625rem;
}

/* ---------------------------------------------------------------------------
   HOMEPAGE (content/_index.md + templates/index.html)

   The "Currently" card is written by hand in the markdown; the Latest list is
   generated by the index.html fork and needs no upkeep.
   Everything below uses Duckquill's variables so it tracks the accent colour
   and both themes automatically -- no hardcoded colours.
   --------------------------------------------------------------------------- */

/* "Currently" -- the one hand-maintained block on the page. */
.now {
	margin: 2.5rem 0;
	box-shadow: var(--edge-highlight);
	border-inline-start: 0.1875rem solid var(--accent-color);
	border-radius: var(--rounded-corner);
	background-color: var(--fg-muted-1);
	padding: 1.25rem 1.5rem;
}

.now p:first-child,
.about p:first-child {
	margin-block-start: 0;
	color: var(--accent-color);
	font-weight: 700;
	font-size: var(--font-size-small);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.now ul {
	margin-block-end: 0;
	padding-inline-start: 1.1rem;
}

.now li {
	margin: 0.35rem 0;
}

/* "Who I am" -- recruiter-facing facts. Shares the small accent heading with
   .now, but stays flat: two stacked cards would compete, and the "Right now"
   card should keep the emphasis. */
.about {
	margin: 2.5rem 0;
}

.about ul {
	margin-block-end: 0;
	padding-inline-start: 1.1rem;
}

.about li {
	margin: 0.35rem 0;
}

/* --- Latest: blog + TIL merged ------------------------------------------- */

.home-latest {
	margin: 0 0 3rem;
	padding: 0;
	list-style: none;
}

.home-latest li {
	margin: 0 0 0.5rem;
	list-style: none;
}

.home-latest a {
	display: flex;
	align-items: baseline;
	gap: 0.875rem;
	transition: var(--transition);
	border-radius: var(--rounded-corner);
	padding: 0.75rem 1rem;
	text-decoration: none;
	color: inherit;
}

.home-latest a:hover {
	background-color: var(--fg-muted-1);
}

/* Small pill marking which section the post came from. */
.home-latest-kind {
	flex-shrink: 0;
	box-shadow: var(--edge-highlight);
	border-radius: 999px;
	background-color: var(--accent-color-alpha);
	padding: 0.125rem 0.5rem;
	color: var(--accent-color);
	font-weight: 700;
	font-size: var(--font-size-x-small);
	text-transform: uppercase;
}

.home-latest-text {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.home-latest-title {
	font-weight: 600;
}

.home-latest a:hover .home-latest-title {
	color: var(--accent-color);
}

.home-latest-desc {
	color: var(--fg-muted-5);
	font-size: var(--font-size-small);
}

.home-latest-date {
	flex-shrink: 0;
	color: var(--fg-muted-4);
	font-size: var(--font-size-small);
	font-variant-numeric: tabular-nums;
}

/* Stack the Latest rows on narrow screens so titles keep their width. */
@media only screen and (max-width: 30rem) {
	.home-latest a {
		flex-wrap: wrap;
		gap: 0.4rem;
	}

	.home-latest-text {
		flex-basis: 100%;
		order: 3;
	}
}

/* ---------------------------------------------------------------------------
   Hackathon timeline (templates/hackathons.html)
   Uses Duckquill's own variables so it tracks the accent colour and theme.
   --------------------------------------------------------------------------- */

.timeline {
	position: relative;
	margin: 2rem 0;
	padding: 0;
	list-style: none;
}

/* The vertical rail. */
.timeline::before {
	position: absolute;
	top: 0.5rem;
	bottom: 0.5rem;
	left: 0.4375rem;
	border-radius: 999px;
	background: linear-gradient(
		to bottom,
		var(--accent-color),
		var(--fg-muted-3)
	);
	width: 0.125rem;
	content: "";
}

.timeline-item {
	position: relative;
	margin: 0 0 1.5rem;
	padding-inline-start: 2rem;
	list-style: none;
}

.timeline-item:last-child {
	margin-bottom: 0;
}

/* The dot on the rail. */
.timeline-marker {
	position: absolute;
	top: 0.4375rem;
	left: 0;
	box-shadow: 0 0 0 0.1875rem var(--bg-color);
	border-radius: 999px;
	background-color: var(--accent-color);
	width: 0.9375rem;
	height: 0.9375rem;
}

.timeline-body {
	box-shadow: var(--edge-highlight), var(--shadow);
	border-radius: var(--rounded-corner);
	background-color: var(--fg-muted-1);
	padding: 1rem 1.25rem;
}

.timeline-date {
	margin: 0 0 0.25rem;
	color: var(--accent-color);
	font-weight: 600;
	font-size: var(--font-size-small);
}

.timeline-title {
	margin: 0 0 0.25rem;
	font-size: var(--font-size-x-large);
}

.timeline-meta {
	margin: 0 0 0.5rem;
	color: var(--fg-muted-5);
	font-size: var(--font-size-small);
}

.timeline-outcome {
	display: inline-block;
	margin: 0 0 0.75rem;
	box-shadow: var(--edge-highlight);
	border-radius: 999px;
	background-color: var(--accent-color-alpha);
	padding: 0.125rem 0.625rem;
	color: var(--accent-color);
	font-weight: 600;
	font-size: var(--font-size-small);
}

.timeline-highlights {
	margin: 0.5rem 0;
	padding-inline-start: 1.25rem;
}

.timeline-highlights li {
	margin: 0.25rem 0;
	font-size: var(--font-size-small);
}

.timeline-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0.75rem 0 0;
}

.timeline-tags {
	margin: 0.5rem 0 0;
	font-size: var(--font-size-x-small);
}

.timeline-tags a {
	margin-inline-end: 0.5rem;
	color: var(--fg-muted-4);
	text-decoration: none;
}

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

/* Tighter rail on small screens. */
@media only screen and (max-width: 480px) {
	.timeline-item {
		padding-inline-start: 1.5rem;
	}
}

/* ---------------------------------------------------------------------------
   PROJECT CARDS (templates/projects.html)

   TRIAL layout. Same visual language as the hackathon timeline cards: muted
   surface, edge highlight, accent used sparingly. Everything tracks the accent
   colour and both themes -- no hardcoded colours.
   --------------------------------------------------------------------------- */

.project-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	gap: 1rem;
	margin: 2rem 0;
	padding: 0;
	list-style: none;
}

.project-card {
	position: relative;
	display: flex;
	flex-direction: column;
	box-shadow: var(--edge-highlight), var(--shadow);
	border-radius: var(--rounded-corner);
	background-color: var(--fg-muted-1);
	padding: 1.25rem 1.25rem 1rem;
	list-style: none;
	transition: var(--transition);
}

.project-card:hover {
	transform: translateY(-0.125rem);
	background-color: var(--fg-muted-2);
}

.project-card.is-featured {
	border-inline-start: 0.1875rem solid var(--accent-color);
}

.project-card-badge {
	align-self: flex-start;
	margin-block-end: 0.5rem;
	box-shadow: var(--edge-highlight);
	border-radius: 999px;
	background-color: var(--accent-color-alpha);
	padding: 0.125rem 0.625rem;
	color: var(--accent-color);
	font-weight: 700;
	font-size: var(--font-size-x-small);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.project-card-title {
	margin: 0 0 0.5rem;
	font-size: var(--font-size-large);
}

.project-card-title a {
	text-decoration: none;
	color: inherit;
}

/* Stretch the title link over the whole card so anywhere is clickable. */
.project-card-title a::after {
	position: absolute;
	inset: 0;
	border-radius: var(--rounded-corner);
	content: "";
}

.project-card:hover .project-card-title a {
	color: var(--accent-color);
}

.project-card-desc {
	flex: 1;
	margin: 0 0 0.875rem;
	color: var(--fg-muted-5);
	font-size: var(--font-size-small);
}

.project-card-stack {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin: 0 0 0.75rem;
}

.project-card-stack span {
	box-shadow: var(--edge-highlight);
	border-radius: var(--rounded-corner-small);
	background-color: var(--bg-color);
	padding: 0.125rem 0.5rem;
	color: var(--fg-muted-5);
	font-size: var(--font-size-x-small);
}

.project-card-date {
	color: var(--fg-muted-4);
	font-size: var(--font-size-x-small);
	font-variant-numeric: tabular-nums;
}

/* Card links sit above the stretched title link, or the card overlay would
   swallow the clicks. */
.project-card-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0 0 0.75rem;
}

.project-card-links a {
	position: relative;
	z-index: 1;
	font-size: var(--font-size-small);
}