/* Site-level overrides on top of main.css (kept separate so main.css stays the original). */

/* Header: page links in the centre slot (where the clock was); no language switch or menu. */
.mm-nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.4rem); }
.mm-nav a {
	position: relative; padding: .4rem 0;
	color: var(--text-2); text-decoration: none;
	font-size: .72rem; text-transform: uppercase; letter-spacing: .1em;
	transition: color var(--t-fast);
}
.mm-nav a::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
	background: var(--accent); transform: scaleX(0); transform-origin: left;
	transition: transform var(--t-base);
}
.mm-nav a:hover, .mm-nav a[aria-current="page"] { color: var(--text); }
.mm-nav a:hover::after, .mm-nav a[aria-current="page"]::after { transform: scaleX(1); }
.mm-nav a:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }

/* Home hero fits the first screen: name, role, tagline and both bio paragraphs are visible
   on load. main.css put 13vh of air above it; here the spacing and the name scale with the
   window height too, and on tall screens the hero is centred in the space under the header. */
.mm-home-hero {
	min-height: calc(100svh - var(--header-h));
	padding-block: clamp(20px, 4.5vh, 64px);
	align-content: center;
}
.mm-home-hero .mm-title--home { font-size: min(calc(clamp(56px, 10vw, 230px) * var(--tk6, 1)), 16vh); }
@media (min-width: 861px) {
	.mm-home-portrait { width: min(100%, 420px, calc((100svh - var(--header-h) - 9vh) * .8)); }
}
@media (max-width: 860px) {
	.mm-home-hero { min-height: 0; }   /* stacked: text first, the card follows below the fold */
}
@media (max-width: 420px) and (max-height: 760px) {   /* small phones */
	.mm-home-hero { padding-top: 14px; }
	.mm-home-hero-text { gap: calc(var(--sp) * .55); }
	.mm-home-hero .mm-hero-bio p { font-size: 16px; line-height: 1.55; }
	.mm-home-hero .mm-hero-bio p + p { margin-top: .7em; }
}

/* main.css hides the centre slot under 900px (it held the clock); the links stay. */
@media (max-width: 900px) {
	.mm-header { grid-template-columns: auto 1fr auto; column-gap: .8rem; }
	.mm-nav { justify-self: end; gap: 1rem; }
	/* main.css moved the theme button into the (removed) menu on small screens */
	.mm-header .mm-theme-toggle { display: inline-grid; }
}
@media (max-width: 560px) {
	.mm-brand-text { display: none; }      /* logo mark only, so the four links fit */
	.mm-nav { gap: .85rem; }
	.mm-nav a { font-size: .64rem; letter-spacing: .06em; }
}