/*
 * HENI-style homepage — Emerald Thinker v2.9.3
 * Measurements are HENI's own (heni.com homepage, 2 Oct 2026). Colours, type
 * and radii come from the tokens in heni-design-system.css.
 */

.ett-heni-home { background: #fff; color: var(--heni-gray-900); font-family: var(--heni-font); font-size: 1rem; line-height: 1.5; }
.ett-heni-home *, .ett-heni-home *::before, .ett-heni-home *::after { box-sizing: border-box; }
.ett-heni-home h1, .ett-heni-home h2, .ett-heni-home h3, .ett-heni-home p { margin: 0; max-width: none; text-transform: none; letter-spacing: 0; }
.ett-heni-home a { text-decoration: none; }
.ett-heni-home img { max-width: 100%; }

/* The base stylesheet removes every radius (!important); opt HENI's 4px back in. */
.ett-body .ett-heni-btn,
.ett-body .ett-heni-card,
.ett-body .ett-heni-news,
.ett-body .ett-heni-panel { border-radius: var(--heni-radius) !important; }
.ett-body .ett-heni-newsletter { border-radius: var(--heni-radius-md) !important; }
.ett-body .ett-heni-newsletter input { border-radius: var(--heni-radius) 0 0 var(--heni-radius) !important; }
.ett-body .ett-heni-newsletter button { border-radius: 0 var(--heni-radius) var(--heni-radius) 0 !important; }
.ett-body .ett-heni-pill,
.ett-body .ett-heni-pill::before { border-radius: 999px !important; }

/* ---- Layout ------------------------------------------------------------ */
.ett-heni-container { width: 100%; max-width: var(--heni-container); margin-inline: auto; padding-inline: var(--heni-pad); }
.ett-heni-section { margin-bottom: 4rem; }

/* ---- Buttons ----------------------------------------------------------- */
.ett-heni-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .125rem;
	border: 1px solid transparent;
	font-family: var(--heni-font); font-weight: 500; line-height: normal;
	letter-spacing: var(--heni-track-btn); text-transform: uppercase; white-space: nowrap;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.ett-heni-btn--md { height: 2.5rem; padding-inline: .625rem; font-size: .875rem; }
.ett-heni-btn--md .ett-heni-btn__label { padding-inline: .25rem; }
.ett-heni-btn--lg { height: 3rem; padding-inline: .875rem; font-size: 1rem; }
.ett-heni-btn--lg .ett-heni-btn__label { padding-inline: .5rem; }
.ett-heni-btn__icon { flex: none; width: 1rem; height: 1rem; }

.ett-heni-btn--dark { background: var(--heni-gray-900); border-color: var(--heni-gray-900); color: var(--heni-gray-50); }
.ett-heni-btn--dark:hover { background: var(--heni-gray-800); border-color: var(--heni-gray-800); color: #fff; }
.ett-heni-btn--dark:active { background: var(--heni-gray-700); }
.ett-heni-btn--outline { background: #fff; border-color: var(--heni-gray-200); color: var(--heni-gray-900); }
.ett-heni-btn--outline:hover { border-color: var(--heni-gray-700); color: var(--heni-gray-900); }
.ett-heni-btn--outline:active { border-color: var(--heni-gray-500); }
.ett-heni-btn--ghost { background: transparent; border-color: var(--heni-gray-200); color: #fff; }
.ett-heni-btn--ghost:hover { background: rgb(0 0 0 / .4); color: #fff; }
.ett-heni-btn--ghost:active { background: rgb(0 0 0 / .6); }

/* ---- Status pill ("Live" on HENI) -------------------------------------- */
.ett-heni-pill {
	display: inline-flex; align-items: center; gap: .375rem;
	padding: .125rem .5rem; border: 1px solid var(--heni-gray-200);
	background: #fff; color: var(--heni-gray-900);
	font-size: .75rem; line-height: 1rem;
}
.ett-heni-pill::before { content: ""; width: .5rem; height: .5rem; background: var(--heni-gray-400); }
.ett-heni-pill--live::before { background: var(--heni-live); }
.ett-heni-pill--soon::before { background: var(--heni-soon); }

/* ---- Hero: 480px (540px from 640), centred, 20% black scrim ------------ */
.ett-heni-hero {
	position: relative; display: flex; align-items: center; justify-content: center;
	height: 30rem; margin-bottom: 2rem; overflow: hidden; background: var(--heni-gray-900);
}
.ett-heni-home .ett-heni-hero__image { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }
.ett-heni-hero__scrim { position: absolute; inset: 0; background: rgb(0 0 0 / .2); }
.ett-heni-hero__content {
	position: relative; z-index: 1; width: 100%; max-width: var(--heni-container);
	padding-inline: var(--heni-pad);
	display: flex; flex-direction: column; align-items: center; text-align: center; color: #fff;
}
.ett-heni-home .ett-heni-hero h1 { margin-bottom: .5rem; color: #fff; font: 500 2rem/2.25rem var(--heni-font); }
.ett-heni-home .ett-heni-hero h2 { margin-bottom: 1.75rem; color: #fff; font: 400 1.5rem/2rem var(--heni-font); }
.ett-heni-hero .ett-heni-pill { margin-bottom: 1.75rem; padding: .375rem .75rem; font-size: .875rem; line-height: 1.25rem; }
.ett-heni-actions { display: flex; flex-direction: column; align-items: stretch; gap: .5rem; }
@media (min-width: 640px) {
	.ett-heni-hero { height: 33.75rem; margin-bottom: 3rem; }
	.ett-heni-home .ett-heni-hero h1 { font-size: 3rem; line-height: 3rem; }
	.ett-heni-home .ett-heni-hero h2 { font-size: 1.875rem; line-height: 2.25rem; }
	.ett-heni-actions { flex-direction: row; gap: 1rem; }
}

/* ---- Intro statement (HENI's mission paragraph: 18/28 -> 20px, 600) ---- */
.ett-heni-intro { margin-bottom: 2rem; }
.ett-heni-home .ett-heni-intro__text { max-width: 56rem; color: var(--heni-gray-900); font: 600 1.125rem/1.75rem var(--heni-font); }
@media (min-width: 640px) {
	.ett-heni-intro { margin-bottom: 3rem; }
	.ett-heni-home .ett-heni-intro__text { font-size: 1.25rem; line-height: 1.75rem; }
}

/* ---- Section heads ----------------------------------------------------- */
.ett-heni-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.ett-heni-head--end { align-items: flex-end; margin-bottom: 1.25rem; }
.ett-heni-home .ett-heni-title { color: var(--heni-gray-900); font: 600 1.5rem/2rem var(--heni-font); }
@media (min-width: 640px) { .ett-heni-home .ett-heni-title { font-size: 1.875rem; line-height: 2.25rem; } }

/* HENI's "HENI  ARTISTS" lockup: bold tracked brand + light word. */
.ett-heni-home .ett-heni-lockup { margin-bottom: .75rem; color: var(--heni-gray-900); font-size: 1rem; line-height: 1.25; text-transform: uppercase; letter-spacing: .2em; font-weight: 300; }
.ett-heni-lockup strong { font-weight: 700; letter-spacing: .26em; }
@media (min-width: 640px) { .ett-heni-home .ett-heni-lockup { font-size: 1.25rem; } }
.ett-heni-home .ett-heni-caption { color: var(--heni-gray-500); font-size: .75rem; line-height: 1rem; }
.ett-heni-home .ett-heni-caption a { color: inherit; text-decoration: underline; }
.ett-heni-home .ett-heni-caption--lg { color: var(--heni-gray-700); font-size: .875rem; line-height: 1.25rem; }

/* ---- Cards: bordered, 4px radius, matted well, three text tiers -------- */
.ett-heni-card-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 540px) { .ett-heni-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ett-heni-card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ett-heni-card-grid--shop { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.ett-heni-card {
	display: flex; flex-direction: column; min-width: 0; height: 100%;
	border: 1px solid var(--heni-gray-200); overflow: hidden;
	background: #fff; color: var(--heni-gray-900);
}
.ett-heni-card__well {
	display: flex; align-items: center; justify-content: center;
	position: relative; aspect-ratio: 1 / 1; height: auto; padding: 0; overflow: hidden; background: var(--heni-mat);
}
.ett-heni-home .ett-heni-card__well img {
	position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; max-height: none;
	object-fit: cover; filter: none;
}
.ett-heni-card__well--type span { padding: 1rem; color: var(--heni-gray-400); font: 500 1.5rem/1.2 var(--heni-font); text-align: center; }
/* Product photography fills the well instead of floating on the mat. */
.ett-heni-card--photo .ett-heni-card__well { position: relative; height: auto; aspect-ratio: 4 / 5; padding: 0; }
.ett-heni-card--photo .ett-heni-card__well img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: cover; filter: none; }

.ett-heni-card__body { flex: 1; display: flex; flex-direction: column; gap: .25rem; padding: 1rem; transition: background-color .15s ease; }
a.ett-heni-card:hover .ett-heni-card__body { background: var(--heni-gray-50); }
.ett-heni-home .ett-heni-card__artist { color: var(--heni-gray-900); font: 500 1rem/1.25rem var(--heni-font); }
.ett-heni-home .ett-heni-card__title { color: var(--heni-gray-700); font: 500 .875rem/1.25rem var(--heni-font); }
.ett-heni-home .ett-heni-card__meta { color: var(--heni-gray-700); font: 400 .875rem/1.25rem var(--heni-font); }
.ett-heni-card .ett-heni-pill { align-self: flex-start; margin-top: .5rem; }

.ett-heni-links { display: flex; flex-wrap: wrap; gap: .75rem 1.75rem; margin-top: 1rem; }
.ett-heni-home .ett-heni-links a { color: var(--heni-gray-900); font: 500 .875rem/1rem var(--heni-font); text-decoration: underline; }
.ett-heni-home .ett-heni-links a:hover { color: var(--heni-gray-600); }

/* ---- Newsletter band --------------------------------------------------- */
.ett-heni-home .ett-heni-newsletter {
	display: grid; gap: 1rem; max-width: none; margin: 0; padding: 1.5rem;
	border: 1px solid var(--heni-gray-200); background: var(--heni-gray-50); text-align: left;
}
@media (min-width: 768px) {
	.ett-heni-home .ett-heni-newsletter { grid-template-columns: minmax(0, 1fr) minmax(20rem, 1fr); align-items: center; gap: 2rem; padding: 2rem; }
}
.ett-heni-home .ett-heni-newsletter__title { padding-bottom: .5rem; color: var(--heni-gray-900); font: 600 1.25rem/1.75rem var(--heni-font); }
.ett-heni-home .ett-heni-newsletter__text { max-width: none; color: var(--heni-gray-600); font: 400 1rem/1.5rem var(--heni-font); }
@media (min-width: 640px) { .ett-heni-home .ett-heni-newsletter__title { font-size: 1.5rem; line-height: 2rem; } }
.ett-heni-newsletter__form { display: flex; width: 100%; max-width: none; margin: 0; }
.ett-heni-newsletter input {
	flex: 1; min-width: 0; height: 2.5rem; padding: .5rem .75rem;
	border: 1px solid var(--heni-gray-200); border-right: 0; background: #fff; color: var(--heni-gray-900);
	font: 400 .875rem/1.25rem var(--heni-font); outline: 0;
}
.ett-heni-newsletter input::placeholder { color: var(--heni-gray-500); }
.ett-heni-newsletter input:hover, .ett-heni-newsletter input:focus { border-color: var(--heni-gray-700); }
.ett-heni-newsletter input:focus-visible { outline: 2px solid var(--heni-link); outline-offset: 1px; }
.ett-heni-newsletter button {
	flex: none; height: 2.5rem; min-height: 2.5rem; padding: 0 1.5rem;
	border: 1px solid var(--heni-gray-900); background: var(--heni-gray-900); color: var(--heni-gray-50);
	font: 500 .875rem/normal var(--heni-font); letter-spacing: var(--heni-track-btn); text-transform: uppercase;
	cursor: pointer; transition: background-color .15s ease, border-color .15s ease;
}
.ett-heni-newsletter button:hover { background: var(--heni-gray-800); border-color: var(--heni-gray-800); }
.ett-heni-newsletter button:disabled { opacity: .6; cursor: progress; }
.ett-heni-home .ett-heni-newsletter__feedback { min-height: 0; margin: .75rem 0 0; color: var(--heni-gray-700); font-size: .75rem; line-height: 1rem; letter-spacing: 0; }
.ett-heni-newsletter__feedback:empty { display: none; }
.ett-heni-newsletter .ett-heni-caption { margin-top: .5rem; }

/* ---- Artists: square tiles on gray-200, name in 16/500 ----------------- */
.ett-heni-artist-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@media (min-width: 640px) { .ett-heni-artist-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .ett-heni-artist-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ett-heni-artist { display: flex; flex-direction: column; min-width: 0; color: var(--heni-gray-900); transition: background-color .15s ease; }
.ett-heni-artist:hover { background: var(--heni-gray-50); }
.ett-heni-artist__photo { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; overflow: hidden; background: var(--heni-gray-200); }
.ett-heni-artist__photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.ett-heni-artist__photo span { color: var(--heni-gray-400); font: 500 2.5rem/1 var(--heni-font); letter-spacing: .05em; }
.ett-heni-home .ett-heni-artist__name { padding: .75rem .25rem; font: 500 1rem/1.25rem var(--heni-font); }

/* ---- Press: HENI News panel -------------------------------------------- */
.ett-heni-panel { padding: 1.5rem; border: 1px solid var(--heni-gray-200); background: #fff; }
@media (min-width: 1024px) { .ett-heni-panel { padding: 2rem; } }
.ett-heni-news-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 640px) { .ett-heni-news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .ett-heni-news-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ett-heni-news { display: grid; grid-template-columns: 6rem minmax(0, 1fr); min-width: 0; overflow: hidden; border: 1px solid var(--heni-gray-200); color: var(--heni-gray-900); }
.ett-heni-news:not(:has(.ett-heni-news__img)) { grid-template-columns: 1fr; }
@media (min-width: 640px) { .ett-heni-news { display: block; } }
.ett-heni-news__img { height: 100%; min-height: 7rem; }
.ett-heni-news__img img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
@media (min-width: 640px) { .ett-heni-news__img { height: auto; min-height: 0; aspect-ratio: 4 / 3; } }
.ett-heni-news__body { align-self: center; min-width: 0; padding: 1rem; }
.ett-heni-home .ett-heni-news__meta { display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin-bottom: .25rem; color: var(--heni-gray-500); font-size: .75rem; line-height: 1rem; }
.ett-heni-news__cat { color: var(--heni-link); }
.ett-heni-home .ett-heni-news h3 {
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
	color: var(--heni-gray-900); font: 600 1rem/1.375 var(--heni-font);
}
.ett-heni-news:hover h3 { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
	.ett-heni-btn, .ett-heni-card__body, .ett-heni-artist, .ett-heni-newsletter button { transition: none; }
}

/* ---- Shop: category tiles (HENI's Books / Apparel / Posters strip) ----- */
.ett-heni-tiles { display: grid; grid-template-columns: 1fr; border: 1px solid var(--heni-gray-400); }
@media (min-width: 640px) { .ett-heni-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ett-heni-tile { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--heni-gray-300); color: #fff; border-bottom: 1px solid var(--heni-gray-400); }
.ett-heni-tile:last-child { border-bottom: 0; }
@media (min-width: 640px) { .ett-heni-tile { aspect-ratio: 1 / 1; border-bottom: 0; border-right: 1px solid var(--heni-gray-400); } .ett-heni-tile:last-child { border-right: 0; } }
.ett-heni-tile img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: bottom; }
.ett-heni-tile__scrim { position: absolute; inset: 0; background: var(--heni-gray-900); opacity: .2; transition: opacity .3s ease; }
.ett-heni-tile:hover .ett-heni-tile__scrim { opacity: .1; }
.ett-heni-home .ett-heni-tile__label { position: absolute; left: 0; bottom: 0; padding: .5rem 1rem; font: 600 1.5625rem/1.2 var(--heni-font); text-transform: uppercase; color: #fff; }
@media (min-width: 1280px) { .ett-heni-home .ett-heni-tile__label { font-size: 2.0625rem; } }

/* All artwork, artist and shop image frames are 1:1 (upload 1000 x 1000 px) at every screen size. */
.ett-heni-artist__photo, .ett-heni-card__well, .ett-heni-tile { aspect-ratio: 1 / 1; }

/* Hero inside Elementor: break out of column/section padding so it spans the whole screen. */
.ett-heni-home .ett-heni-hero--bleed { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
html:has(.ett-heni-hero--bleed) { overflow-x: clip; }
.ett-heni-hero picture { display: contents; }

/* ---- Latest releases slider (matches heni.com on phones/tablets) ---------- */
.ett-heni-slider__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title title" "caption nav"; align-items: center; column-gap: 1rem; row-gap: .75rem; margin-bottom: 1.5rem; }
.ett-heni-home .ett-heni-slider__top .ett-heni-title { grid-area: title; font-size: 1.875rem; line-height: 2.25rem; }
.ett-heni-home .ett-heni-slider__caption { grid-area: caption; color: var(--heni-gray-500); font: 400 .875rem/1.25rem var(--heni-font); }
.ett-heni-slider__nav { grid-area: nav; display: flex; gap: .5rem; }
.ett-heni-slider__top > .ett-heni-btn { grid-area: button; display: none; }
.ett-heni-slider__btn { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid var(--heni-gray-700); background: #fff; color: var(--heni-gray-900); cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.ett-body .ett-heni-slider__btn { border-radius: var(--heni-radius) !important; }
.ett-heni-slider__btn:hover:not(:disabled) { border-color: var(--heni-gray-900); }
.ett-heni-slider__btn:disabled { border-color: var(--heni-gray-100); color: var(--heni-gray-300); cursor: default; }
.ett-heni-slider__cta { margin-top: 1.5rem; }
.ett-heni-slider__cta .ett-heni-btn { width: 100%; font-size: 1rem; }

@media (max-width: 1023.98px) {
	/* viewport bleeds to the right screen edge so the next card peeks in and fades out */
	.ett-heni-slider__viewport { position: relative; margin-right: calc(var(--heni-pad) * -1); }
	.ett-heni-slider__viewport::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 4.5rem; background: linear-gradient(to right, rgb(255 255 255 / 0), #fff); pointer-events: none; transition: opacity .2s ease; }
	.ett-heni-slider.is-end .ett-heni-slider__viewport::after { opacity: 0; }
	.ett-heni-slider .ett-heni-slider__track { display: flex; gap: 1.5rem; padding-right: var(--heni-pad); overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
	.ett-heni-slider .ett-heni-slider__track::-webkit-scrollbar { display: none; }
	.ett-heni-slider .ett-heni-slider__track > .ett-heni-card { flex: 0 0 min(calc(100% - 4.5rem), 22rem); scroll-snap-align: start; height: auto; }
	.ett-heni-slider .ett-heni-slider__track:focus-visible { outline: 2px solid var(--heni-link); outline-offset: 2px; }
}
@media (min-width: 1024px) {
	.ett-heni-slider__top { grid-template-areas: "title button" "caption button"; row-gap: .25rem; }
	.ett-heni-slider__top > .ett-heni-btn { display: inline-flex; grid-area: button; align-self: center; }
	.ett-heni-slider__nav, .ett-heni-slider__cta { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ett-heni-slider__viewport::after, .ett-heni-slider__btn { transition: none; } }