/* L44 Hero — 1000px composition that scales as one piece.
 *
 * Every size is expressed in cqi (1% of the container's width), so at 1000px
 * the design renders at its drawn dimensions and at any narrower width the
 * whole thing shrinks together — the text keeps overlapping the image exactly
 * as it does on desktop rather than reflowing into a different layout.
 * ------------------------------------------------------------------------- */

.l44h {
	container-type: inline-size;
	/* Its own stacking context, sitting flat at 0 in the page. Without this the
	   z-index on the text and dots competed with the site's own layers, and the
	   headline drew over the open mobile menu. */
	position: relative;
	z-index: 0;
	isolation: isolate;
	width: 1000px;
	max-width: 100%;
	margin: 0 auto;
	/* Clears the site header above and holds a gap before whatever follows.
	   Both come from the hero's own fields. */
	padding-top: var(--l44h-top, 120px);
	margin-bottom: var(--l44h-bottom, 50px);
	box-sizing: border-box;
	--l44h-fade: #dcdcdc;
	--l44h-fade-0: rgba(220, 220, 220, 0);
	--l44h-ink: #181617;
	--l44h-hours: #ffffff;
	--l44h-hover: #e6b5c9;
	/* Radius of the circle that follows the cursor across the headline. */
	--l44h-reveal-r: 30px;
	--l44h-font: "CoFo Sans", "CoFoSans Regular", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	font-family: var(--l44h-font);
	color: var(--l44h-ink);
}

.l44h *,
.l44h *::before,
.l44h *::after { box-sizing: border-box; }

.l44h__inner {
	position: relative;
	/* 500 of 1000 — the image height, which sets the block height. */
	min-height: 50cqi;
}

/* ---------- Image ---------- */

.l44h__media {
	position: absolute;
	top: 0;
	right: 0;
	/* 600 x 500 of the 1000 grid. */
	width: 60cqi;
	height: 50cqi;
	overflow: hidden;
}

.l44h__frames {
	position: absolute;
	inset: 0;
}

.l44h__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 0;
	transition: opacity 420ms ease;
}

.l44h__img.is-on { opacity: 1; }

/* Sliding, when "Slide automatically" is on: every picture is shown, waiting
   just off the right edge; the one on screen sits at 0, and the one leaving
   goes out to the left. Going back (a dot to the left, a swipe to the right)
   is the same the other way round. The frame's overflow hides the waiting. */
.l44h--slide .l44h__img {
	opacity: 1;
	transform: translateX( 100% );
	transition: transform 650ms cubic-bezier( .65, 0, .35, 1 );
	will-change: transform;
}

.l44h--slide .l44h__img.is-on { transform: translateX( 0 ); }
.l44h--slide .l44h__img.is-out,
.l44h--slide .l44h__img.is-back { transform: translateX( -100% ); }
.l44h--slide .l44h__img.is-out-back { transform: translateX( 100% ); }
.l44h--slide .l44h__img.is-still { transition: none; }

/* Opaque on the left, clear on the right, morphing through the middle. The
   right stop is the same colour at zero alpha rather than `transparent`, which
   fades through black in some engines. */
.l44h__fade {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, var(--l44h-fade) 0%, var(--l44h-fade-0) 100%);
	pointer-events: none;
}

/* ---------- Opening hours ---------- */

.l44h__hours {
	position: absolute;
	right: 2cqi;
	bottom: 1.6cqi;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	color: var(--l44h-hours);
	line-height: 1.1;
	text-transform: uppercase;
	text-align: right;
}

.l44h .l44h__days {
	font-size: 2.4cqi;
	font-weight: 700;
	color: inherit;
}

/* The digits are drawn as circles in CSS with a real numeral inside — see the
   rule further down — so weight and colour are set here and followed there. */
.l44h .l44h__time {
	font-size: 2.8cqi;
	font-weight: 700;
	color: inherit;
	letter-spacing: 0.02em;
}

/* A black disc behind each numeral, filling the ring so the white number and
   its ring stand off whatever is behind them.
   
   0.70em against a ring CoFo Sans draws at 0.77em — measured on the page, not
   estimated. Just inside the stroke: any larger and a black edge creeps out
   past the ring, any smaller and a crescent of the photograph shows within
   it. */
/* A drawn digit. Sized in em and sitting on the baseline, so it behaves like
   the character it replaces — the line can be scaled anywhere and the digits
   follow. No circle behind it: the drawing carries its own. */
.l44h .l44h__dig--svg { line-height: 0; background: none; width: auto; height: auto; }

.l44h .l44h__svg {
	display: inline-block;
	height: 1.15em;
	width: auto;
	vertical-align: -0.24em;
}

/* Each digit in a circle drawn here rather than taken from a character — the
   same construction as the cart badge, and for the same reason: the circle and
   the numeral are separate things, so they can be different colours.
   
   Proportioned from the badge, where a 26px circle carries a 15px digit. The
   digit is set at a fraction of the line so the circle, at 1.73 of that, comes
   out about 0.8em — the width the circled characters occupied, so the line
   keeps the measure it had. */
.l44h .l44h__dig {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.46em;
	width: 1.73em;
	height: 1.73em;
	margin: 0 0.04em;
	border-radius: 50%;
	background: var( --l44h-dig-bg, #ffffff );
	/* Stated, not inherited: the numeral has to read against the circle, and
	   the line's own colour is the white the circle is now filled with. */
	color: var( --l44h-dig-fg, #181617 );
	font-weight: inherit;
	line-height: 1;
	/* middle, not a nudge in em. It centres the circle on the line's middle —
	   the same place the dash and the colons sit — so the three line up by
	   construction instead of by a figure that only holds at one size. */
	vertical-align: middle;
}

/* ---------- Text ---------- */

.l44h__text {
	position: relative;
	z-index: 2;
	/* Runs past the image's left edge; the gradient is what makes it readable. */
	width: 66cqi;
	padding: 8cqi 0 0 0;
}

.l44h__title {
	position: relative;
	margin: 0;
	font-size: 7cqi;      /* 70px at 1000 */
	line-height: 1.05;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: -0.005em;
	/* Not selectable text as far as the pointer is concerned — the I-beam made
	   the headline look like an input. */
	cursor: default;
	/* Held here rather than on the reveal so both copies can read them. */
	--l44h-mx: -999px;
	--l44h-my: -999px;
}

.l44h__titletext { display: block; }

/* The black copy is cut away exactly where the coloured one shows. Stacking
   them left the black visible through the softened edge of the mask, which read
   as a muddy outline. The two gradients are complements: solid where the other
   is clear. */
.l44h__title.is-revealing .l44h__titletext {
	-webkit-mask-image: radial-gradient(
		circle var(--l44h-reveal-r) at var(--l44h-mx) var(--l44h-my),
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0) var(--l44h-reveal-solid, 30%),
		#000 100%
	);
	mask-image: radial-gradient(
		circle var(--l44h-reveal-r) at var(--l44h-mx) var(--l44h-my),
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0) var(--l44h-reveal-solid, 30%),
		#000 100%
	);
}

/* The coloured copy, stacked exactly over the first. It is revealed through a
   radial mask centred on the cursor: solid in the middle, trailing off to
   nothing at the edge, which is what gives the soft blurred boundary. The mask
   sits off-canvas until a pointer arrives, so nothing shows on load. */
.l44h__reveal {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	display: block;
	color: var(--l44h-hover);
	pointer-events: none;
	opacity: 0;
	transition: opacity 180ms ease;
	-webkit-mask-image: radial-gradient(
		circle var(--l44h-reveal-r) at var(--l44h-mx) var(--l44h-my),
		#000 0%,
		#000 var(--l44h-reveal-solid, 30%),
		rgba(0, 0, 0, 0) 100%
	);
	mask-image: radial-gradient(
		circle var(--l44h-reveal-r) at var(--l44h-mx) var(--l44h-my),
		#000 0%,
		#000 var(--l44h-reveal-solid, 30%),
		rgba(0, 0, 0, 0) 100%
	);
}

.l44h__title.is-revealing .l44h__reveal { opacity: 1; }

/* Rainbow: the six house colours as a gradient clipped to the letterforms and
   swept sideways. The last stop repeats the first so the loop has no seam.
   Painting the text with a background means `color` must go transparent. */
.l44h__reveal.is-rainbow {
	color: transparent;
	background-image: linear-gradient(
		90deg,
		#e45d50, #ffb511, #00a95c, #82d8d5, #62a8e5, #e6b5c9, #e45d50
	);
	background-size: 300% 100%;
	background-repeat: repeat;
	-webkit-background-clip: text;
	background-clip: text;
	animation: l44h-rainbow 7s linear infinite;
}

@keyframes l44h-rainbow {
	from { background-position: 0 0; }
	to { background-position: -300% 0; }
}

.l44h__sub {
	margin: 3.4cqi 0 0;
	font-size: 3cqi;      /* 30px bold */
	line-height: 1.3;
	font-weight: 700;
	text-transform: uppercase;
	max-width: 52cqi;
}

.l44h__intro {
	margin: 3.2cqi 0 0;
	font-size: 3cqi;      /* 30px regular */
	line-height: 1.3;
	font-weight: 400;
	max-width: 56cqi;
}

/* ---------- Dots ---------- */

.l44h__dots {
	position: absolute;
	left: 0;
	bottom: -3.4cqi;
	display: flex;
	gap: 1.2cqi;
	z-index: 3;
}

.l44h__dot {
	appearance: none;
	-webkit-appearance: none;
	width: 1.2cqi;
	height: 1.2cqi;
	min-width: 9px;
	min-height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(24, 22, 23, 0.25);
	cursor: pointer;
	transition: background-color 200ms ease;
}

.l44h__dot:hover { background: rgba(24, 22, 23, 0.5); }
.l44h__dot.is-on { background: var(--l44h-ink); }
.l44h__dot:focus-visible { outline: 2px solid var(--l44h-ink); outline-offset: 3px; }

.l44h .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ---------- Small screens ----------
   The desktop composition puts a 600px image beside overlapping text. At phone
   width that image ends up tiny and the text spills past its bottom edge, which
   is what the screenshot showed. Here the image fills the whole block instead
   and the text sits centred inside it, with equal padding above and below so
   the image is always taller than the text it carries. */
@media (max-width: 767px) {
	.l44h { padding-top: var(--l44h-top-m, 80px); }

	.l44h__inner { min-height: 0; }

	.l44h__media {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
	}

	/* Horizontal, matching the desktop. The fade is held solid further across
	   than at desktop because the text now spans the full width. */
	.l44h__fade {
		background: linear-gradient(
			90deg,
			var(--l44h-fade) 0%,
			var(--l44h-fade) 42%,
			var(--l44h-fade-0) 100%
		);
	}

	.l44h__text {
		position: relative;
		width: 100%;
		/* Equal top and bottom: centres the text and guarantees the image
		   extends past it at both ends. Left inset keeps it off the screen edge
		   — fixed px rather than cqi so it holds at every width. */
		padding: 13cqi 0 13cqi 15px;
	}

	.l44h__title { font-size: 9cqi; }

	.l44h__sub,
	.l44h__intro {
		font-size: 4.2cqi;
		max-width: 100%;
	}

	.l44h__sub { margin-top: 4.5cqi; }
	.l44h__intro { margin-top: 4.5cqi; }

	/* Doubled from 3.4 and 3.8. The hours are sized against the container, and
	   on a phone that container is narrow enough that the desktop proportion
	   came out too small to read at arm's length. */
	/* .l44h .l44h__x, not .l44h__x: the base rules use two classes, so a
	   single-class rule here loses on specificity however narrow the screen —
	   which is why the mobile sizes never took effect.
	   
	   4.2cqi is the subtitle's size on this breakpoint. The hours are set to
	   match it rather than to a figure of their own, so the two stay in step if
	   either is ever changed. */
	.l44h .l44h__hours { right: 3cqi; bottom: 3cqi; }
	.l44h .l44h__days { font-size: 4.2cqi; }
	.l44h .l44h__time { font-size: 4.2cqi; }

	/* Lined up with the indented text rather than the image edge. */
	.l44h__dots { left: 15px; bottom: -6cqi; }
	.l44h__dot { width: 2.4cqi; height: 2.4cqi; }
}

/* The hours, on anything narrow.
   
   Two problems with sizing them only in the 767px block above. That breakpoint
   is narrower than the 900px the rest of the site treats as mobile, so between
   768 and 900 the hours kept their desktop proportion — which is where they
   were still coming out small. And cqi has no floor: it is a share of the
   hero's width, so a narrow hero shrinks the type without limit however large
   the share is.
   
   clamp fixes both — a real minimum in pixels, the container share in the
   middle, and a ceiling so it cannot run away on a wide phone in landscape. */
@media (max-width: 900px) {
	.l44h .l44h__hours { right: 3cqi; bottom: 3cqi; }
	.l44h .l44h__days { font-size: 4.2cqi; }
	.l44h .l44h__time { font-size: 4.2cqi; }
}

@media (prefers-reduced-motion: reduce) {
	.l44h__img,
	.l44h--slide .l44h__img { transition: none; }
	.l44h__reveal.is-rainbow { animation: none; }
}