/* ==========================================================================
   Front page
   --------------------------------------------------------------------------
   One screen. The wordmark holds the top left, the site's own navigation holds
   the top right, and a single photograph runs off the bottom right corner. The
   space between them is the composition - most of this file is about keeping
   that space empty and keeping the three elements out of each other's way.

   Everything is scoped to .nsn-home or to the front page's body class, so no
   rule here can reach another page.
   ========================================================================== */

.nsn-home {
	/*
	 * The coral. The same value the Contact page's accent uses, stated here
	 * rather than imported so the front page carries its own palette and
	 * neither section can quietly change the other.
	 */
	--nsn-home-coral: #FF6548;

	/*
	 * The wordmark is six and a half times wider than it is tall, so its size
	 * is set by width and the height follows. Wide enough to be the subject,
	 * held back from the right edge so it can never run under the navigation.
	 */
	--nsn-home-mark: min(74vw, 1040px);

	/* Where the picture starts. It runs from here to the bottom right corner. */
	--nsn-home-image-left: 34%;
	--nsn-home-image-top: 38%;

	/*
	 * Breathing space between the wordmark and the top edge of the picture.
	 *
	 * Held separately from --nsn-home-image-top, and applied once where that
	 * value is used, so every breakpoint that re-places the picture keeps the
	 * same gap without restating it. Proportional to the viewport height,
	 * because that is what the distance between the two elements is measured
	 * against.
	 */
	--nsn-home-gap: clamp(1.25rem, 3.4vh, 2.5rem);

	position: relative;
	overflow: hidden;

	/*
	 * Exactly one screen, and no more: svh so a phone's collapsing address bar
	 * cannot add a scrollbar, with vh behind it for anything that does not
	 * know svh.
	 */
	height: 100vh;
	height: 100svh;

	background: var(--nsn-ink);
}

/* --------------------------------------------------------------------------
   The wordmark

   The supplied asset, inlined and filled with currentColor - so it takes the
   coral from this rule rather than needing a second version of the file.

   It sits a little off the left edge of the page, the way a mark does when it
   has been placed rather than centred. Below the header's band, so the
   navigation opposite it is never crowded.
   -------------------------------------------------------------------------- */
.nsn-home__mark {
	position: absolute;
	top: calc(var(--nsn-header-h) + clamp(1.5rem, 4vh, 3.5rem));
	left: calc(var(--nsn-gutter) - clamp(4px, 1.2vw, 22px));
	z-index: 2;	
	margin: 0;

	/*
	 * Live text, at the size the mark was approved at - and no wider than the
	 * page it is set on.
	 *
	 * Set in MG12, "Zegnooitnooit." measures 6.615 times its font size, so at
	 * 80px it is 529px wide on one unbroken line. That fits from about 550px
	 * upward and does not fit below it: a phone was cutting the end off the
	 * mark, and at 320px the reader saw "Zegnooitn". The second term is the
	 * widest setting that still stands between the two gutters, derived from
	 * the same constant, and min() reaches for it only where 80px will not go.
	 * Every width from the tablet up is left exactly as it was.
	 *
	 * line-height 1 because the SVG this replaced had no line box: at these
	 * sizes a normal one would be about a quarter taller and would push the
	 * picture down.
	 */
	font-size: min(80px, calc((100vw - var(--nsn-gutter) * 2) / 6.615));
	font-weight: 500;
	line-height: 1;

	/* The body carries 0.005em; the wordmark is set solid, as the artwork was. */
	letter-spacing: normal;
	white-space: nowrap;

	color: var(--nsn-bone);
}

/* --------------------------------------------------------------------------
   The picture

   Anchored to the bottom right corner and bleeding off both of those edges,
   which is what makes it read as a crop of something larger rather than a
   picture placed on a page. The black is left at the top and the left, where
   the wordmark needs it.
   -------------------------------------------------------------------------- */
.nsn-home__image {
	position: absolute;
	top: calc(var(--nsn-home-image-top) + var(--nsn-home-gap));
	left: var(--nsn-home-image-left);
	right: 0;

	/*
	 * The frame is let down past the bottom edge by exactly the gap it was
	 * pushed down from the top.
	 *
	 * It is pinned top and bottom, so moving only the top would take the gap
	 * out of the frame's own height - and since the picture is object-fit:
	 * cover, a shorter frame is a differently scaled, differently cropped
	 * picture. Letting the bottom out by the same amount keeps the frame
	 * exactly the size it always was, so the crop and the scale are untouched
	 * and the whole rectangle simply sits lower.
	 *
	 * The overflow falls off the bottom of the page, which is the edge this
	 * picture already bleeds past by design, and .nsn-home clips it.
	 *
	 * The phone rule below re-pins this to top: auto / bottom: 0, so none of
	 * this reaches the stacked mobile composition.
	 */
	bottom: calc(var(--nsn-home-gap) * -1);

	z-index: 1;
	margin: 0;
	overflow: hidden;
}

.nsn-home__img {
	display: block;
	width: 100%;
	height: 100%;

	/*
	 * cover, deliberately: this is a crop, and the box is the crop. The image
	 * is held to one side so the frame takes the lighter, more open part of it
	 * rather than centring on the darkest corner.
	 */
	object-fit: cover;
	object-position: 62% 40%;

	/* Monochrome whatever is chosen, so a colour photograph cannot break the
	   page's two-colour discipline. */
	filter: grayscale(1) contrast(1.04);
}

/* --------------------------------------------------------------------------
   Tablet: the same composition, smaller, with the picture given a little more
   of the width as the wordmark gives some up.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
	.nsn-home {
		--nsn-home-mark: min(80vw, 760px);
		--nsn-home-image-left: 28%;
		--nsn-home-image-top: 40%;
	}
}

/* --------------------------------------------------------------------------
   Phone

   The composition stacks rather than shrinking: the wordmark across the top,
   the picture as a block beneath it, both inside the gutter. Nothing bleeds
   sideways, because at this width a bleed is indistinguishable from an
   overflow.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
	.nsn-home {
		--nsn-home-mark: calc(100vw - var(--nsn-gutter) * 2);
	}

	.nsn-home__mark {
		top: calc(var(--nsn-header-h) + clamp(1.25rem, 5vh, 2.5rem));
		left: var(--nsn-gutter);
	}

	.nsn-home__image {
		/*
		 * Below the wordmark, and still running off the bottom right corner so
		 * the page keeps its crop rather than becoming a centred card.
		 */
		top: auto;
		left: var(--nsn-gutter);
		right: 0;
		bottom: 0;
		height: min(58svh, 470px);
	}

	.nsn-home__img {
		object-position: 58% 45%;
	}
}

/* --------------------------------------------------------------------------
   Short landscape screens: the wordmark gives way first, since the picture is
   what stops the page looking empty at this shape.
   -------------------------------------------------------------------------- */
@media (max-height: 560px) and (min-width: 701px) {
	.nsn-home {
		--nsn-home-mark: min(56vw, 720px);
		--nsn-home-image-top: 32%;
	}
}

/* --------------------------------------------------------------------------
   The header, on this page only

   Two small adjustments, both scoped to the front page's body class. Neither
   changes a rule the header owns, only whether an existing one is expressed.

   The wordmark in the header is the same mark as the one filling the page
   below it, so it is withheld here - it would read as the logo printed twice.
   visibility rather than display, so the header keeps its shape and the
   navigation stays where it is on the right.

   The navigation carries the underline it already draws on hover. On a page
   this empty the links need to look like links without being pointed at.
   -------------------------------------------------------------------------- */
body.home .nsn-header__brand {
	visibility: hidden;
}

/*
 * Top level only. WAT? carries a submenu, and drawing this underline under its
 * six children as well would set six permanent rules inside a small panel.
 * The children keep the underline they already draw on hover.
 */
body.home .nsn-nav__link::after,
body.home .nsn-nav__list > .menu-item > a::after {
	transform: scaleX(1);
}

body.home .nsn-nav__link,
body.home .nsn-nav .menu-item > a {
	color: var(--nsn-bone);
}