/* ===========================================================================
   Home page — page chrome.

   Three things live here:
     · one flat background colour across the whole page
     · the "About Me" text box width
     · the Portfolio PDF / line / social icons row in #contact

   The carousel is in gallery-3d.css and the opening animation in
   intro-sequence.css. Colours and spacing come from home.json.
   =========================================================================== */

/* ── One background, everywhere ─────────────────────────────────────────────
   The template gives each section its own shade; this page is a single field,
   so every section is made see-through and the page itself carries the
   background.

   The picture comes from "background": { "image": ... } in home.json and is
   written straight onto the <body> tag, the same way the banner photo is. It
   has to be done there rather than here: a url() kept in a CSS variable is
   measured from this file's folder, not from index.html, so the picture would
   never be found. Everything except which file to use is set below — it is
   scaled to cover the screen and stays still while the page scrolls. Take the
   "image" line out of the JSON and the flat colour takes over again. */

body {
	background-color: var(--page-background, #242943);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
#main,
#main section,
#main .inner { background: transparent !important; }

/* ── About Me ──────────────────────────────────────────────────────────────
   A short bio, centred, directly under the banner -- scrolling the photo and
   title out of view is what reveals it (see the reveal-rise class on #about
   in home.html). Text comes from home.json -> "about". */

/* Starting state before site/_code/js/about-fade.js runs its first frame -- it
   takes over from here, setting opacity and transform inline on every
   scroll, one line at a time (the heading, then the paragraph). */
#about .about-heading,
#about .about-text {
	opacity: 0;
}

#about .inner {
	max-width: 46em;
}
.about-text p {
	margin: 0 0 1.2em;
	line-height: 1.85;
	opacity: 0.75;
}
.about-text p:last-child {
	margin-bottom: 0;
}

/* Not switched on: the About Me placeholder has always shown in the normal
   style on the live site, so build.ps1 never adds is-pending here. To grey it
   out while site/0-home/about-me.txt is empty, add 'about.textPending' to
   $Switches in build.ps1 and {{ aboutPendingClass }} back to the about-text
   <div> in _code/templates/home.html. */
.about-text.is-pending p {
	font-style: italic;
	opacity: 0.5;
}

/* ── Portfolio PDF / line / social icons ─────────────────────────────────────
   One row: the label, a line that fills whatever space is left, then the
   round icons. The template's #contact CSS (assets/css/main.css) lays out a
   60/40 pair of columns -- a form on the left, an Email/Phone "split" block on
   the right -- for content this page doesn't have, so that column split and
   its border are turned back off first. */

#contact > .inner {
	display: block;
	padding: 4em 3em !important;
}
#contact > .inner > :nth-child(2n - 1) {
	width: 100%;
	border-right: 0;
	padding: 0;
}

.docs-row {
	display: flex;
	align-items: center;
	gap: 1.5em;
}
.docs-label {
	white-space: nowrap;
}
.docs-label .doc-sep {
	margin: 0 0.5em;
	opacity: 0.4;
}
.docs-line {
	flex: 1 1 auto;
	height: 1px;
	background: rgba(255, 255, 255, 0.2);
}
.contact-icons {
	margin: 0;
	flex: 0 0 auto;
}
.contact-icons li {
	padding: 0 0.6em;
}

@media screen and (max-width: 736px) {

	.docs-row {
		flex-wrap: wrap;
		justify-content: center;
	}
	.docs-line {
		display: none;
	}

	/* A taller banner on phones, so the photo is scaled up enough for the
	   person to fill the width. */
	#banner.major {
		height: var(--banner-height-mobile, 75vh);
	}

}

/* ── Banner photo on phones and upright tablets ──────────────────────────────
   The person stands in the right-hand third of the photo, so the desktop
   framing (banner.imagePosition in home.json) cut them out of any screen
   taller than it is wide. Here the photo is framed on them instead: the
   "banner-...-mobile" lines in home.json's "layout". !important because the
   desktop framing is written straight onto the banner's own tag. Landscape
   screens (computers, tablets held sideways) keep the desktop framing. */
@media screen and (max-width: 736px), screen and (orientation: portrait) {
	#banner {
		background-size: auto var(--banner-zoom-mobile, 100%) !important;
		background-position: var(--banner-position-mobile, 84% bottom) !important;
		/* the title sits low, over the clothes, so it never covers the face */
		align-items: flex-end;
	}
}