/* PowerPointBase logo refresh (Oct 28, 2026).
   Replaces the .logo rules in styles.css: ".logo", ".logo span" and ".logo b" in the HEADER block, and the
   max-width 420px .logo rule near the end. Loaded after styles.css (and refresh.css) it also overrides them,
   so deleting the old rules is tidy but not required.

   Mark:      images/mark.svg (drawn on a 46 x 30 pixel grid), shown at 52 x 34 px.
   Wordmark:  live text, Manrope 700 caps, POWERPOINT in teal and BASE in cyan, as now.
   Tagline:   live text inside the homepage link, now under the wordmark in sentence case, in grey.
   No markup changes: the header link and the footer div keep their current HTML. */

:root {
	--ppb-logo-cyan: #05A3D3;   /* was #00C0E9: same hue family, deepened to the teal's lightness, 2.9:1 on white */
	--ppb-logo-teal: #3BA79A;   /* unchanged, the site's accent */
	--ppb-logo-tag: #6b6f76;    /* 5:1 on white */
}

/* header: the mark, then the wordmark with the tagline under it, one block centred in the 60 px bar */
.logo {
	display: inline-grid; grid-template-columns: max-content 1fr; align-content: center;
	position: relative; height: 60px; margin-right: 40px; padding-left: 62px;
	background: url(../images/mark.svg) 0 50% / 52px auto no-repeat;
	font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 22px; line-height: 1; letter-spacing: .02em;
	white-space: nowrap; text-decoration: none; color: var(--ppb-logo-cyan) !important;
}
.logo b {font-weight: inherit; padding-left: 0; color: var(--ppb-logo-teal);}
/* the grid puts <b> and the text "BASE" side by side; the tagline spans both columns on the second row */
.logo span {
	grid-column: 1 / -1; position: static; margin-top: 6px;
	font-size: 12px; font-weight: 400; line-height: 1.2; letter-spacing: .01em; text-transform: none;
	color: var(--ppb-logo-tag);
}

/* footer: the same lockup without the tagline (the footer markup has none), centred in its 44 px row */
.footer .logo {height: 44px; margin: 0;}

/* phones: same size down to 360 px (this rule only cancels the old 420 px rule in styles.css) */
@media screen and (max-width: 420px) {
	.logo {margin-right: 0; padding-left: 62px; font-size: 22px; background-position: 0 50%; background-size: 52px auto;}
}
/* 320 px screens: one step down so the lockup fits inside the 20 px gutters */
@media screen and (max-width: 359px) {
	.logo {padding-left: 52px; font-size: 19px; background-size: 44px auto;}
	.logo span {font-size: 11px; margin-top: 5px;}
}