/**
 * Page openings for Gallery and Shop (Our Story and Contact carry theirs in
 * their own stylesheets). Each page opens differently on purpose:
 *   Gallery: night blue, editorial title, a strip of photos at one height.
 *   Shop:    plum, real bars standing on pastel arches.
 * Photos and packshots keep their own proportions; nothing is cropped.
 */

/* Ridge into the cream section below, painted by the hero itself. */
.tlg-hero::after,
.tlsh-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: var(--tlo-edge, clamp(64px, 9vw, 130px));
	background: var(--tlm-cream, #F7F0E2);
	pointer-events: none;
	-webkit-mask: var(--vb-mask-ridge) no-repeat 0 0 / 100% 100%;
	mask: var(--vb-mask-ridge) no-repeat 0 0 / 100% 100%;
}

/* A coloured back ridge peeks out behind the cream one, like the ridges between the Home sections. */
.tlg-hero::before,
.tlsh-hero::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	z-index: 3;
	height: calc(var(--tlo-edge, clamp(64px, 9vw, 130px)) * 1.3);
	background: var(--vb-tangerine, #F59A3B);
	pointer-events: none;
	-webkit-mask: var(--vb-mask-ridge-back) no-repeat 0 0 / 100% 100%;
	mask: var(--vb-mask-ridge-back) no-repeat 0 0 / 100% 100%;
}

.tlg-hero h1,
.tlsh-hero h1 {
	font-family: var(--tlm-font-display);
	font-variation-settings: "SOFT" 100, "WONK" 1;
	font-weight: 750;
	letter-spacing: -0.02em;
	text-wrap: balance;
	color: #fff;
}

/* ==================================================================
 * Gallery: the photos are the background. A horizontal carousel of eight
 * landscape photos slides behind the title; dots below.
 * ================================================================== */
.tlg-hero {
	--tlo-edge: clamp(64px, 9vw, 130px);
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(620px, 100svh, 940px);
	background: var(--vb-night);
	color: #fff;
	padding: calc(var(--tlm-v3-header-h, 72px) + 2rem) 0 calc(var(--tlo-edge) + 2.5rem);
	isolation: isolate;
	overflow: hidden;
}

/* The ridge is drawn by the hero but sits below the overflow clip, so it needs room inside the box. */
.tlg-hero::after { z-index: 4; }

.tlg-hero__carousel { position: absolute; inset: 0; z-index: 0; }

.tlg-hero__track {
	display: flex;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.tlg-hero__track::-webkit-scrollbar { display: none; }
.tlg-hero__track:focus-visible { outline: 3px solid var(--vb-sun); outline-offset: -3px; }

.tlg-hero__slide {
	flex: 0 0 100%;
	height: 100%;
	margin: 0;
	scroll-snap-align: start;
}

.tlg-hero__slide img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

.tlg-hero__shade {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(27, 36, 64, 0.88) 0%, rgba(27, 36, 64, 0.62) 38%, rgba(27, 36, 64, 0) 72%),
		linear-gradient(180deg, rgba(27, 36, 64, 0.55) 0%, rgba(27, 36, 64, 0) 22%);
}

.tlg-hero__head {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var(--tlm-content-box, 1280px);
	margin-inline: auto;
	padding-inline: var(--tlm-section-px, 1.5rem);
	pointer-events: none; /* swipes pass through to the photos */
}

.tlg-hero h1 {
	max-width: 14ch;
	margin: 0 0 1.25rem;
	font-size: clamp(2.8rem, 6.4vw, 5.8rem);
	line-height: 0.98;
	text-shadow: 0 4px 30px rgba(27, 36, 64, 0.45);
}

.tlg-hero .vb-kicker { margin-bottom: 1.1rem; }

.tlg-hero__intro {
	max-width: 44ch;
	margin: 0;
	font-size: clamp(1.05rem, 1.5vw, 1.2rem);
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.96);
}

.tlg-hero__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(var(--tlo-edge) + 1.1rem);
	z-index: 3;
	display: flex;
	justify-content: center;
	gap: 0.7rem;
}

.tlg-hero__dots button {
	box-sizing: border-box;
	width: 14px !important;
	height: 14px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: 2px solid #fff !important;
	border-radius: 50% !important;
	background: transparent !important;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.tlg-hero__dots button[aria-current="true"] { background: var(--vb-sun) !important; border-color: var(--vb-sun) !important; transform: scale(1.25); }
.tlg-hero__dots button:focus-visible { outline: 3px solid var(--vb-sun); outline-offset: 3px; }

@media (prefers-reduced-motion: no-preference) {
	.tlg-hero__track { scroll-behavior: smooth; }

	.vb-anim .tlg-hero .vb-kicker,
	.vb-anim .tlg-hero__intro {
		opacity: 0;
		transform: translateY(18px);
		animation: vb-fade-up 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	}

	.vb-anim .tlg-hero .vb-kicker { animation-delay: 0.05s; }
	.vb-anim .tlg-hero__intro { animation-delay: 0.9s; }
}

@media (max-width: 900px) {
	.tlg-hero__shade {
		background: linear-gradient(0deg, rgba(27, 36, 64, 0.9) 0%, rgba(27, 36, 64, 0.62) 55%, rgba(27, 36, 64, 0.3) 100%);
	}
}

/* ==================================================================
 * Shop
 * ================================================================== */
.tlsh-hero {
	--tlo-edge: clamp(64px, 9vw, 130px);
	position: relative;
	background:
		radial-gradient(60% 90% at 85% 25%, #7A2F66 0%, rgba(122, 47, 102, 0) 70%),
		#4E1F44;
	color: #fff;
	padding: calc(var(--tlm-v3-header-h, 72px) + clamp(2rem, 5vw, 3.5rem)) 0 calc(var(--tlo-edge) + 1.5rem);
}

.tlsh-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 4.6fr) minmax(0, 7.4fr);
	gap: clamp(2rem, 5vw, 4rem);
	align-items: end;
	max-width: var(--tlm-content-box, 1280px);
	margin-inline: auto;
	padding-inline: var(--tlm-section-px, 1.5rem);
}

.tlsh-hero h1 {
	margin: 0 0 1.25rem;
	font-size: clamp(2.4rem, 4.8vw, 4.2rem);
	line-height: 1;
}

.tlsh-hero__lede {
	margin: 0 0 1.25rem;
	font-size: 1.15rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.96);
}

.tlsh-hero__note {
	margin: 0 0 1.75rem;
	padding-top: 1.1rem;
	border-top: 1px solid rgba(255, 255, 255, 0.3);
	font-size: 1rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.85);
}

.tlsh-hero__actions { display: flex; flex-wrap: wrap; gap: 0.85rem 1rem; }

.tlsh-hero__actions .vb-btn svg { fill: none; stroke: currentColor; stroke-width: 1.8; }
.tlsh-hero__actions .vb-btn svg path:last-child { fill: currentColor; stroke: none; }

.tlsh-hero__shelf {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(0.6rem, 1.4vw, 1rem);
	align-items: end;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tlsh-arch {
	margin: 0;
	background: var(--tlsh-stage);
	border-radius: 999px 999px 20px 20px;
	box-shadow: 0 22px 40px -24px rgba(0, 0, 0, 0.6);
	overflow: hidden;
}

.tlsh-arch:nth-child(1) { aspect-ratio: 3 / 5.3; }
.tlsh-arch:nth-child(2) { aspect-ratio: 3 / 4.6; }
.tlsh-arch:nth-child(3) { aspect-ratio: 3 / 5; }
.tlsh-arch:nth-child(4) { aspect-ratio: 3 / 4.3; }

.tlsh-arch a {
	display: flex;
	justify-content: center;
	align-items: stretch;
	height: 100%;
	padding: 20% 3% 6%;
}

/* The packshot files are square with the bar in the middle; this window trims
   only the empty white around the bar (the whole bar stays visible). */
.tlsh-arch img {
	display: block;
	width: auto;
	max-width: 100%;
	height: 100%;
	aspect-ratio: 0.56;
	object-fit: cover;
	object-position: 52% 50%;
	mix-blend-mode: multiply;
}

.tlsh-arch a:focus-visible { outline: 3px solid #fff; outline-offset: -6px; border-radius: inherit; }

@media (prefers-reduced-motion: no-preference) {
	/* lift the whole arch (background + bar together). A transform on the link itself would isolate
	   the bar from its stage and show the photo's white box instead of blending (multiply). */
	.tlsh-arch { transition: translate 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease; }
	.tlsh-arch:hover, .tlsh-arch:focus-within { translate: 0 -10px; box-shadow: 0 30px 46px -22px rgba(0, 0, 0, 0.65); }

	.vb-anim .tlsh-arch {
		opacity: 0;
		transform: translateY(60px);
		animation: vb-fade-up 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
	}

	.vb-anim .tlsh-arch:nth-child(1) { animation-delay: 0.6s; }
	.vb-anim .tlsh-arch:nth-child(2) { animation-delay: 0.75s; }
	.vb-anim .tlsh-arch:nth-child(3) { animation-delay: 0.9s; }
	.vb-anim .tlsh-arch:nth-child(4) { animation-delay: 1.05s; }
}

@media (max-width: 900px) {
	.tlsh-hero__inner { grid-template-columns: minmax(0, 1fr); }
}

/* phones: two by two; tablets keep all four in one row */
@media (max-width: 560px) {
	.tlsh-hero__shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
	.tlsh-arch:nth-child(n) { aspect-ratio: 3 / 4.2; }
}

@media (prefers-reduced-motion: reduce) {
	.tlg-hero *, .tlsh-hero * { animation: none !important; transition: none !important; }
}


/* ------------------------------------------------------------------
 * Shop opening, fuller: a faded photo behind the shelf, bigger arches
 * ------------------------------------------------------------------ */
.tlsh-hero { overflow: hidden; isolation: isolate; }

.tlsh-hero__bg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	width: 64%;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 45%), linear-gradient(0deg, transparent 0%, #000 30%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(90deg, transparent 0%, #000 45%), linear-gradient(0deg, transparent 0%, #000 30%);
	mask-composite: intersect;
}

.tlsh-hero__bg img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.38;
	mix-blend-mode: luminosity;
}

.tlsh-hero::after, .tlsh-hero::before { z-index: 4; }

.tlsh-hero__inner { grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr); align-items: center; }

.tlsh-hero__shelf {
	height: clamp(430px, 58vh, 600px);
	align-items: end;
	gap: clamp(0.7rem, 1.6vw, 1.4rem);
}

.tlsh-arch { height: 100%; aspect-ratio: auto; }
.tlsh-arch:nth-child(1) { height: 100%; }
.tlsh-arch:nth-child(2) { height: 84%; }
.tlsh-arch:nth-child(3) { height: 94%; }
.tlsh-arch:nth-child(4) { height: 78%; }

.tlsh-arch a { padding: 22% 4% 7%; }

@media (max-width: 900px) {
	.tlsh-hero__inner { grid-template-columns: minmax(0, 1fr); }
	.tlsh-hero__bg { width: 100%; opacity: 0.8; }
	.tlsh-hero__shelf { height: clamp(300px, 70vw, 440px); }
}

@media (max-width: 560px) {
	.tlsh-hero__shelf { height: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
	.tlsh-arch:nth-child(n) { height: auto; aspect-ratio: 3 / 4.2; }
}

/* arches stay inside their grid column (the photo's own size must not widen them) */
.tlsh-arch { min-width: 0; }
.tlsh-arch a { min-width: 0; }
.tlsh-arch img { width: auto; max-width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 52% 50%; }
.tlsh-arch a { flex: none; }

/* the older fixed aspect ratios on the arches made them wider than their columns */
.tlsh-hero .tlsh-arch:nth-child(n) { aspect-ratio: auto; width: 100%; }
@media (max-width: 560px) {
	.tlsh-hero .tlsh-arch:nth-child(n) { height: auto; aspect-ratio: 3 / 4.2; }
}

/* ------------------------------------------------------------------
 * Arches sized so the whole bar always shows: the photo window keeps the
 * bar's own proportions (about 0.56 wide per tall), nothing is cut off.
 * ------------------------------------------------------------------ */
.tlsh-hero__inner { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.tlsh-hero__shelf { height: auto; align-items: end; gap: clamp(0.8rem, 1.6vw, 1.5rem); }

.tlsh-hero .tlsh-arch:nth-child(n) { height: auto; aspect-ratio: 1 / 2.3; width: 100%; }
.tlsh-hero .tlsh-arch:nth-child(2) { margin-bottom: clamp(1.5rem, 4vw, 3.5rem); }
.tlsh-hero .tlsh-arch:nth-child(3) { margin-bottom: clamp(0.5rem, 1.6vw, 1.4rem); }
.tlsh-hero .tlsh-arch:nth-child(4) { margin-bottom: clamp(2rem, 5vw, 4.5rem); }

.tlsh-arch a { padding: 20% 4% 6%; }
.tlsh-arch img { width: 100%; height: 100%; max-width: none; aspect-ratio: auto; object-fit: cover; object-position: 50% 50%; }

@media (max-width: 900px) {
	.tlsh-hero__inner { grid-template-columns: minmax(0, 1fr); }
	.tlsh-hero__shelf { height: auto; }
}

@media (max-width: 560px) {
	.tlsh-hero .tlsh-arch:nth-child(n) { aspect-ratio: 1 / 2.1; margin-bottom: 0; }
}