/* =============================================================================
   footer.css: the press contact band and footer (components 10 and 11)
   -----------------------------------------------------------------------------
   Markup: parts/footer.html (every page) and parts/footer-home.html (Home: the same
   band inside a pinned act so it holds at the end of the page). Revised at Ian's
   request, 13 Nov 2026: "more modern and pops out".

   Night ground, left aligned:
     his name across the full width (each word rises into place, motion.css)
     three columns: press enquiries with the one red action | pages | elsewhere
     the last line: copyright, back to top
   ============================================================================= */

.press-band {
	margin-top: var(--s-section);
	padding: var(--s-section) calc(var(--gutter) + var(--line-gutter)) 0;
	background: var(--night);
	color: var(--paper);
	text-align: left;
}
.press-band p { max-width: none; margin-inline: 0; }
.press-band :focus-visible { outline-color: var(--red); }   /* ink focus rings vanish on night */

/* His name, sized so the two words fill the frame (8.75 is the measured width of
   "Federico Pignatelli" in Bodoni Moda 700 at 1 em, plus a little room) */
.band-name {
	display: block;
	max-width: none;
	margin: 0 0 var(--s-6);
	font: 700 calc((100vw - 2 * var(--gutter) - 2 * var(--line-gutter) - 16px) / 8.75)/.9 var(--display);
	font-optical-sizing: none;
	font-variation-settings: "opsz" 6;
	letter-spacing: -.04em;
	white-space: nowrap;
}
/* Each word sits in a mask it rises out of; the mask leaves room for the g's descender and
   the capitals (padding), cancelled by a negative margin so the layout doesn't move */
.bn-w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .3em .04em .34em; margin: -.3em -.04em -.34em; }
.bn-w > span { display: inline-block; }
@media (max-width: 699px) {
	.band-name { font-size: var(--step-display); white-space: normal; }   /* phones: two lines */
}

/* Three columns */
.band-grid { display: grid; gap: var(--s-6) var(--s-5); }
@media (min-width: 800px) {
	.band-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 3fr); }
}
.band-contact .label, .band-col .label { margin-bottom: var(--s-3); color: var(--night-grey); }
.press-band .band-lede {
	max-width: 28ch;
	color: var(--paper);
	font: italic 500 var(--step-lede)/1.3 var(--display);
	font-optical-sizing: none;
	font-variation-settings: "opsz" 6;
}
.band-contact .btn { margin-top: var(--s-5); }
.band-col { display: flex; flex-direction: column; align-items: flex-start; }
.band-col a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--paper);
	font: 600 var(--step-lede)/1.25 var(--display);
	font-optical-sizing: none;
	font-variation-settings: "opsz" 6;
	text-decoration: none;
}

/* The last line (component 11) */
.site-footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--s-3);
	margin-top: var(--s-6);
	padding: var(--s-5) 0 var(--s-6);
	color: var(--night-grey);
	font: 500 var(--step-label)/1.4 var(--text);
}
.site-footer span { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer a { display: inline-flex; align-items: center; min-height: 44px; color: var(--paper); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: 6px; }   /* motion.css draws a bar instead */

/* ---- Home: the band pinned at the end of the page ------------------------- */
/* .ending is the pinned act; its stage is the band, filling the screen, content at the foot.
   On phones phone.js removes the pin (the band is taller than a phone screen). */
.ending { margin-top: var(--s-section); }
.ending [data-sc-stage].press-band {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	margin-top: 0;
	padding: calc(var(--header-h) + var(--s-6)) calc(var(--gutter) + var(--line-gutter)) 0;
}
@media (max-width: 699px) {
	.ending .press-band { padding-top: var(--s-section); }
}