/* ===========================================================================
   The three-line "Menu" icon, top right, next to the word "Menu".

   The original template drew its own icon as a background-image tucked into
   invisible padding on the link -- easy to miss and fiddly to restyle. This
   replaces it with three plain <span> bars (in header.html) that always
   render, sized and coloured by the rules below, in the one file every page
   already loads. The first two rules switch the old one off.
   =========================================================================== */

#header nav a[href="#menu"] {
	padding-right: 1.5em !important;
}
#header nav a[href="#menu"]:before,
#header nav a[href="#menu"]:after {
	content: none !important;
}

#header nav a.menu-toggle {
	display: flex;
	align-items: center;
	gap: 0.65em;
}

/* .corner-logo (below) sits fixed in the top-left corner; the menu link stays
   flex-aligned to the top right, so the two no longer need to share room. */

.menu-toggle-icon {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 20px;
	height: 14px;
	flex: 0 0 auto;
}

.menu-toggle-icon span {
	display: block;
	width: 100%;
	height: 2px;
	border-radius: 1px;
	background: currentColor;
}

/* ── Phones ────────────────────────────────────────────────────────────────
   At 480px and below, assets/css/main.css hides the word "Menu" by pushing
   the link's text out of a clipped 5em-wide box, leaving only the template's
   old pseudo-element icon. With that icon switched off above, nothing at all
   was left: on a phone the button was there but invisible. This undoes the
   trick, so phones get the same word + three bars as every other screen. */
@media screen and (max-width: 480px) {
	#header nav a.menu-toggle {
		overflow: visible;
		text-indent: 0;
		width: auto;
	}
}

/* The narrowest phones (320-360px) cannot fit the full name beside "Menu":
   the word is hidden from view - but still read out by screen readers - and
   the three bars stay. */
@media screen and (max-width: 360px) {
	#header nav a.menu-toggle .menu-toggle-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
}

/* ===========================================================================
   The permanent corner logo -- images/logo.svg, top left, on every page.

   logo.svg is a full 1920x1080 export with the actual mark sitting in one
   corner of mostly empty canvas, so showing it full-size would make the mark
   tiny inside a huge invisible box. Cropping it to just its content (with a
   small margin) takes a background-image sized and positioned in percent --
   the standard CSS sprite-crop trick -- rather than editing the source SVG:

     size-x%   = 100 * (native width)  / (crop width)
     size-y%   = 100 * (native height) / (crop height)
     pos-x%    = 100 * (crop left) / (native width  - crop width)
     pos-y%    = 100 * (crop top)  / (native height - crop height)

   Written out in percent rather than px, these four numbers don't depend on
   how big .corner-logo-mark is actually drawn, so the same crop works at any
   size with no further math -- see the matching rule for the banner's flying
   monogram in intro-sequence.css, which reuses it unchanged at a different
   width. The crop box itself (82, 251, 368, 204 out of the native 1920x1080)
   is images/logo.svg's own drawn content, found by rendering it and measuring
   the non-transparent pixels, plus about 15px of margin. ===================
   =========================================================================== */

.corner-logo {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.9em 1.3em;
	opacity: 1;
	transition: opacity 0.4s ease;
}

.corner-logo-mark {
	display: block;
	height: 2.6em;
	aspect-ratio: 368 / 204;
	background-image: url('../../../images/logo.svg');
	background-repeat: no-repeat;
	background-size: 521.739% 529.412%;
	background-position: 5.284% 28.653%;
}

@media screen and (max-width: 480px) {
	.corner-logo { padding: 0.6em 0.9em; }
	.corner-logo-mark { height: 2.1em; }
}