/* ==========================================================================
   custom.css — loaded after style.css
   Overrides only. Nothing here touches .shape-overlays / .hamburger, so the
   burger colour-wave animation stays exactly as it is.
   ========================================================================== */

:root {
	--radius-tile: 18px;
	--hairline: rgba(11, 11, 12, .09);
}


/* --- logo -----------------------------------------------------------------
   The theme sized the old 200x200 mark at 128px tall. The mark is now a single
   bold Montserrat S, so it wants a type-scale height rather than a block one. */

#logo img {
	height: 44px;
	width: auto;
}

@media only screen and (max-width: 767px) {
	#logo img { height: 36px; }
}

/* The old mark was green and read against anything. This one is near-black, so
   swap to the light variant while the burger overlay is open — demo6.js puts
   .is-opened-navi on .hamburger, and the overlay lands on a dark gradient. */

#header-container:has(.hamburger.is-opened-navi) #logo img.black-logo { opacity: 0; }
#header-container:has(.hamburger.is-opened-navi) #logo img.white-logo { opacity: 1; }

#header-container:has(.hamburger.is-opened-navi) .menu-info {
	color: #fff;
	transition: color .4s ease;
}


/* --- icons ----------------------------------------------------------------
   Font Awesome 4.7 (2016) is gone from this page. UI glyphs are inline Lucide
   (ISC) outlines; the three brand marks are outlined paths. Everything takes
   its colour from currentColor, so the light-content states need no extra rules
   and there is no stylesheet or webfont to download. */

.icon {
	width: 1em;
	height: 1em;
	display: inline-block;
	vertical-align: -.125em;
	flex: none;
	overflow: visible;
}

/* "say hello" — the old markup spaced its glyph with an   */
.flexnav a .icon {
	margin-right: .45em;
	width: 1.05em;
	height: 1.05em;
	stroke-width: 1.9;
}

/* the menu sits at font-size:52px — full-em icons would dwarf the old glyphs */
.global-menu__item .icon {
	width: .6em;
	height: .6em;
	vertical-align: middle;
}

/* the filters toggle stacks its glyph over a decorative ring */
#open-filters .icon,
#backtoworks .icon {
	position: absolute;
	left: 0;
	top: 0;
	width: 50px;
	height: 50px;
	padding: 16px;
	box-sizing: border-box;
	color: #000;
	stroke-width: 1.75;
}

.light-content #open-filters .icon,
.light-content #backtoworks .icon {
	color: #fff;
}


/* --- hero text alignment --------------------------------------------------
   The three lines each carried a different stray offset (title -3px, subtitle
   +3px, place +2px), so the left edge stepped in and out. Flush them all, then
   hang the map pin in the margin so the labels stay in one optical column. */

#hero-caption h1,
#hero-caption .hero-title,
#hero-caption .hero-subtitle {
	margin-left: 0;
	padding-left: 0;
}

#hero-caption .hero-place {
	margin-left: 0;
	padding-left: 0;
}

/* Snug the three lines into one block. The theme's line boxes are much taller
   than the type in them (60px around a 52px title, 32px around 16px), which
   left the stack floating apart. Leave .hero-title span alone — its padding is
   what the intro reveal animates. */

#hero-caption h1 {
	margin-bottom: 0;
}

#hero-caption .hero-subtitle {
	line-height: 1.2;
	margin-top: -6px;
	margin-bottom: 7px;
}

#hero-caption .hero-place {
	line-height: 1.15;
	margin-bottom: 0;
}

.typewrite > .wrap {
	margin-left: 0;
	margin-right: 0;
}

.hero-subtitle {
	font-family: 'Maven Pro', ui-sans-serif, -apple-system, BlinkMacSystemFont, sans-serif;
	letter-spacing: -.005em;
}

.hero-place {
	display: flex;
	align-items: center;
	gap: .28em;
}

/* The pin sits in the column with everything else. Its viewBox is cropped to
   the drawn shape (18x22 of the original 24x24) so the element box and the ink
   share a left edge — no empty bearing making it read as misaligned. */
.hero-place .icon {
	height: .95em;
	width: calc(.95em * 18 / 22);
	stroke-width: 2.1;
	opacity: .85;
}


/* --- portfolio tiles ------------------------------------------------------
   .item-content a already carries overflow:hidden, so rounding it clips the
   gradient inside. The hairline keeps pale tiles from bleeding into the page. */

.item-content a {
	border-radius: var(--radius-tile);
}

.item-content .item-image {
	border-radius: var(--radius-tile);
	box-shadow: inset 0 0 0 1px var(--hairline);
	transform: scale(1);
	transition: transform .5s cubic-bezier(.22, 1, .36, 1);
	will-change: transform;
}

.item-content:hover .item-image {
	transform: scale(1.025);
}

.light-content .item-content .item-image {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}

@media only screen and (max-width: 767px) {
	:root { --radius-tile: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	.item-content .item-image,
	.item-content:hover .item-image {
		transition: none;
		transform: none;
	}
}


/* --- tile captions --------------------------------------------------------
   The theme asks for 'Lato' and 'Poppins', neither of which the site ever
   loaded, so captions were falling back to the browser's default serif. */

.item-sub-mask,
.item-cat,
.item-case,
.item-title[data-badge]::after {
	font-family: 'Maven Pro', ui-sans-serif, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* The theme hard-coded a red "New" badge onto whichever tile happened to be
   first. It's data-driven now — set "badge" on a project in projects.json. */

.item:first-child .item-title::after { content: none; }

.item-title[data-badge]::after {
	content: attr(data-badge);
	position: absolute;
	margin-left: 10px;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--accent-badge, #02d084);
}


/* --- footer social labels -------------------------------------------------
   These are plain text now, not links. The theme hung the type styling on
   .socials-text li a, so move it onto the li and keep the separator dashes. */

.socials-text li {
	color: #000;
	font-size: 14px;
	font-weight: 500;
	font-family: 'Maven Pro', ui-sans-serif, -apple-system, BlinkMacSystemFont, sans-serif;
	cursor: default;
}

.light-content .socials-text li {
	color: #fff;
}

/* The theme dimmed the whole list on hover and lit the one link back up. With
   no links there is nothing to light up, so hold the resting colour instead. */
.socials-text:hover li {
	color: #000;
}

.light-content .socials-text:hover li {
	color: #fff;
}


/* --- menu social marks ---------------------------------------------------
   The icons are decorative now that the links are gone: no pointer, no focus
   ring, no hover lift that implies something will happen. */

.global-menu__item[aria-hidden="true"] {
	cursor: default;
	pointer-events: none;
}