/**
 * Home 2 — concert-discovery layout.
 *
 * Structure follows the client's reference (songkick.com): a search-led hero,
 * a dense vertical concert listing, artist tiles and city browse columns.
 * Rendered bright, in the K Madang identity. Every class is namespaced `.ent-`
 * so nothing here can collide with style.css; the site chrome is re-tuned at
 * the foot of this file under the `.ent-dark` body class.
 *
 * The `.ent-dark` hook is a historical name — the class is set in
 * functions.php for both Home 2 and Home 3, so it stays put. Home 2 is no
 * longer a dark treatment; the palette below is what decides that.
 */

/* Tokens sit on <body> so the site chrome (masthead, footer) shares the page
   palette. Paper and a cool blue-tinted near-white: the client asked for a
   brighter page than the original near-black treatment, so the brand red and
   blue now do the colouring against a light ground instead of glowing out of
   a dark one. */
.ent-dark {
	--ent-bg:        #FFFFFF;
	--ent-bg-2:      #FBF6F7;
	--ent-card:      #FFFFFF;
	--ent-card-2:    #F1E9EA;
	--ent-line:      rgba(16, 47, 92, .13);
	--ent-line-2:    rgba(16, 47, 92, .28);
	--ent-fg:        #0E1A2B;
	--ent-fg-soft:   #3B4657;
	--ent-fg-mute:   #6B7480;
	/* The lifted red that carried small type on black now fails against paper,
	   so the two swap roles: the deep cast reads as text, the exact flag value
	   fills. */
	--ent-accent:    #A31F2B;
	--ent-accent-2:  #CD2E3A;
	/* Home 2 runs red as the primary and blue as the secondary: red carries
	   headings, links, numerals, status pills and hover states, and blue is
	   held back for buttons alone, so a call to action is the one thing on the
	   page wearing it. */
	--ent-blue:      #0047A0;
	--ent-blue-br:   #1163CE;
	--ent-shadow:    rgba(16, 47, 92, .16);
	--ent-r:         10px;
	--ent-r-sm:      6px;

	background: var(--ent-bg);
	color: var(--ent-fg);
}

.ent {
	background:
		radial-gradient(60% 30% at 50% 0%, rgba(205, 46, 58, .06) 0%, transparent 70%),
		var(--ent-bg);
	color: var(--ent-fg);
	font-family: var(--font-ui);
}

/* These are resets, so they are wrapped in :where() to carry element-only
   specificity. Written as `.ent p` they scored 0,1,1 and silently beat every
   single-class component rule (0,1,0) — which meant `margin-top` on things
   like .ent-about__lede and .ent-about__actions never applied at all, and
   .ent-btn--primary lost its white text to `.ent a`. Keep :where() on
   anything in this block. */
:where(.ent) h1,
:where(.ent) h2,
:where(.ent) h3 {
	font-family: var(--font-ui);
	font-weight: 700;
	letter-spacing: -.025em;
	line-height: 1.15;
	margin: 0;
}
:where(.ent) :lang(ko) { font-family: var(--font-ko); font-style: normal; }
:where(.ent) p { margin: 0; }
:where(.ent) ul, :where(.ent) ol { margin: 0; padding: 0; list-style: none; }
:where(.ent) a { color: inherit; }

/* --------------------------------------------------------------------------
   Primitives
   -------------------------------------------------------------------------- */

.ent-kicker {
	display: inline-flex;
	align-items: center;
	gap: .625rem;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ent-accent);
}
.ent-kicker::before {
	content: "";
	width: 20px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}

.ent-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .875rem 1.625rem;
	border: 1px solid transparent;
	border-radius: 100px;
	font: inherit;
	font-size: .875rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.ent-btn--primary { background: var(--ent-blue-br); color: #fff; }
.ent-btn--primary:hover { background: var(--ent-blue); }
.ent-btn--ghost { border-color: var(--ent-line-2); color: var(--ent-fg); }
.ent-btn--ghost:hover { border-color: var(--ent-blue-br); background: rgba(17, 99, 206, .08); color: var(--ent-blue); }
.ent-btn--sm { padding: .625rem 1.25rem; font-size: .8125rem; }

.ent-tag {
	display: inline-flex;
	align-items: center;
	gap: .4375rem;
	padding: .3125rem .625rem;
	border-radius: 100px;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	white-space: nowrap;
}
.ent-tag--live { background: var(--ent-accent-2); color: #fff; }
.ent-tag--few  { background: rgba(205, 46, 58, .14); color: var(--ent-accent); }
.ent-tag--ok   { background: var(--ent-accent-2); color: #fff; }
.ent-tag i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
	animation: ent-pulse 2s infinite;
}
@keyframes ent-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* Section scaffolding -------------------------------------------------------
   The sections would otherwise be flat slabs of paper. Each carries three
   cheap, GPU-friendly layers so the page feels lit rather than printed:
   drifting colour auras, a raking light streak, and a fine hatch texture.
   All of it is pseudo-elements on the section itself — no extra markup — and
   all of it stops under prefers-reduced-motion. On the bright ground the
   auras are tints rather than glows, and the rake darkens instead of
   lightening. */

.ent-section {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(3rem, 5.5vw, 4.75rem);
}

/* Stage-wash auras. Oversized and blurred so the edges never band. */
.ent-section::before {
	content: "";
	position: absolute;
	inset: -25% -12%;
	z-index: -2;
	background:
		radial-gradient(36% 40% at 14% 16%, rgba(205, 46, 58, .18) 0%, transparent 70%),
		radial-gradient(32% 36% at 86% 28%, rgba(232, 184, 75, .16) 0%, transparent 72%),
		radial-gradient(44% 48% at 60% 92%, rgba(205, 46, 58, .12) 0%, transparent 74%);
	filter: blur(30px);
	animation: ent-aura 38s ease-in-out infinite alternate;
	will-change: transform;
}

/* Raking light across the slab, like a follow-spot crossing the room. */
.ent-section::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		repeating-linear-gradient(114deg, rgba(16, 47, 92, .028) 0 1px, transparent 1px 8px),
		linear-gradient(114deg, transparent 32%, rgba(16, 47, 92, .04) 46%, transparent 60%);
	background-size: auto, 260% 100%;
	background-repeat: repeat, no-repeat;
	mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 74%, transparent 100%);
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 26%, #000 74%, transparent 100%);
	animation: ent-rake 26s linear infinite;
}

/* Alternating sections take the mirrored wash so the page has a rhythm
   instead of the same glow repeating down the scroll. */
.ent-section--alt {
	background:
		linear-gradient(180deg, var(--ent-bg-2) 0%, #FFFFFF 52%, var(--ent-bg-2) 100%);
}
.ent-section--alt::before {
	background:
		radial-gradient(38% 42% at 84% 14%, rgba(205, 46, 58, .16) 0%, transparent 70%),
		radial-gradient(34% 38% at 10% 34%, rgba(232, 184, 75, .14) 0%, transparent 72%),
		radial-gradient(46% 50% at 38% 94%, rgba(205, 46, 58, .1) 0%, transparent 74%);
	animation-duration: 46s;
	animation-direction: alternate-reverse;
}
.ent-section--alt::after { animation-duration: 34s; animation-direction: reverse; }

@keyframes ent-aura {
	0%   { transform: translate3d(-2%, -1%, 0) scale(1); }
	50%  { transform: translate3d(2%, 2%, 0)  scale(1.09); }
	100% { transform: translate3d(-1%, 3%, 0) scale(1.03); }
}
@keyframes ent-rake {
	from { background-position: 0 0, -60% 0; }
	to   { background-position: 0 0, 160% 0; }
}

.ent-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.25rem 2rem;
	flex-wrap: wrap;
	padding-bottom: 1.25rem;
	margin-bottom: clamp(1.5rem, 2.5vw, 2.125rem);
	border-bottom: 1px solid var(--ent-line);
}
.ent-head__title { margin-top: .4375rem; font-size: clamp(1.5rem, 3vw, 2.25rem); }
.ent-head__sub { margin-top: .4375rem; max-width: 54ch; font-size: .9375rem; line-height: 1.7; color: var(--ent-fg-mute); }
.ent-head__link {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-size: .8125rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--ent-fg-soft);
	white-space: nowrap;
}
.ent-head__link:hover { color: var(--ent-accent); }
.ent-head__link i { font-style: normal; transition: transform .25s var(--ease); }
.ent-head__link:hover i { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Hero — search-led
   -------------------------------------------------------------------------- */

.ent-hero { position: relative; isolation: isolate; overflow: hidden; }
.ent-hero__bg { position: absolute; inset: 0; z-index: -2; }
/* A wide crowd frame, shown sharp. Biased slightly above centre so the raised
   hands and the stage rig both stay in shot as the hero shortens on narrow
   viewports, and the darker foreground crowd sits under the search field. */
.ent-hero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 42%;
	/* Lifted well past neutral: what survives the bright wash above should be
	   the shape of the crowd, not its shadows. */
	filter: brightness(1.5) saturate(.9);
}

/* The crowd frame is dark, so on a bright page the wash has to lift it rather
   than deepen it. A near-opaque pool of paper sits under the copy so the
   headline holds contrast, a vertical ramp resolves the frame into the page
   ground, and a low red wash ties the amber stage cast to the brand accent. */
.ent-hero__wash {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(68% 58% at 50% 40%, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .62) 62%, rgba(255, 255, 255, .3) 78%),
		linear-gradient(180deg,
			rgba(255, 255, 255, .74) 0%,
			rgba(255, 255, 255, .6) 34%,
			rgba(255, 255, 255, .82) 72%,
			var(--ent-bg) 100%),
		radial-gradient(96% 74% at 50% 22%, rgba(205, 46, 58, .1) 0%, transparent 68%);
}

.ent-hero__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding-block: clamp(3.25rem, 7vw, 5.5rem);
}

.ent-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 1rem;
}
.ent-hero__badgetxt {
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--ent-fg-soft);
}

.ent-hero__title {
	max-width: 18ch;
	font-size: clamp(2.125rem, 5.4vw, 4rem);
	letter-spacing: -.035em;
	line-height: 1.05;
}
.ent-hero__title em { font-style: normal; color: var(--ent-accent); }

.ent-hero__lede {
	margin-top: .75rem;
	max-width: 56ch;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--ent-fg-soft);
}

/* Decorative layers ------------------------------------------------------ */

/* Fine dot grid — the structural motif that carries through to the shop. */
.ent-hero__pattern {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(rgba(16, 47, 92, .3) 1px, transparent 1px);
	background-size: 26px 26px;
	mask-image: radial-gradient(70% 60% at 50% 36%, #000 0%, transparent 76%);
	-webkit-mask-image: radial-gradient(70% 60% at 50% 36%, #000 0%, transparent 76%);
	opacity: .22;
}

/* Stage glows, drifting slowly behind the copy. */
.ent-hero__orb {
	position: absolute;
	z-index: -1;
	border-radius: 50%;
	filter: blur(90px);
	pointer-events: none;
}
.ent-hero__orb--1 {
	top: -12%;
	left: -6%;
	width: 34vw;
	height: 34vw;
	background: rgba(205, 46, 58, .18);
	animation: ent-drift-a 16s ease-in-out infinite alternate;
}
.ent-hero__orb--2 {
	top: 8%;
	right: -8%;
	width: 30vw;
	height: 30vw;
	background: rgba(232, 184, 75, .2);
	animation: ent-drift-b 19s ease-in-out infinite alternate;
}
@keyframes ent-drift-a {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to   { transform: translate3d(6%, 8%, 0) scale(1.14); }
}
@keyframes ent-drift-b {
	from { transform: translate3d(0, 0, 0) scale(1.08); }
	to   { transform: translate3d(-7%, 6%, 0) scale(1); }
}

/* Sweeping follow-spot across the headline. */
.ent-hero__beam {
	position: absolute;
	top: -40%;
	left: 42%;
	width: 26vw;
	height: 180%;
	z-index: -1;
	background: linear-gradient(to bottom, rgba(255, 255, 255, .75), transparent 60%);
	transform: rotate(16deg);
	filter: blur(34px);
	pointer-events: none;
	animation: ent-sweep 11s ease-in-out infinite alternate;
}
@keyframes ent-sweep {
	from { transform: rotate(12deg) translateX(-6%); opacity: .55; }
	to   { transform: rotate(21deg) translateX(6%);  opacity: 1; }
}

/* Poster wall ------------------------------------------------------------ */

.ent-wall {
	position: relative;
	display: flex;
	overflow: hidden;
	padding-block: 1rem 1.75rem;
	mask-image:
		linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
		linear-gradient(to bottom, #000 58%, transparent);
	-webkit-mask-image:
		linear-gradient(to right, transparent, #000 14%, #000 86%, transparent),
		linear-gradient(to bottom, #000 58%, transparent);
	mask-composite: intersect;
	-webkit-mask-composite: source-in;
}
.ent-wall__track {
	display: flex;
	flex: none;
	gap: 1rem;
	padding-right: 1rem;
	animation: ent-wall-scroll 46s linear infinite;
}
.ent-wall__item {
	flex: none;
	width: 6.75rem;
	aspect-ratio: 3 / 4;
	border-radius: var(--ent-r);
	overflow: hidden;
	border: 1px solid var(--ent-line);
	box-shadow: 0 18px 40px var(--ent-shadow);
	transform: rotate(-1.5deg);
}
.ent-wall__item:nth-child(even) { transform: rotate(1.8deg) translateY(-8px); }
.ent-wall__item img { width: 100%; height: 100%; object-fit: cover; opacity: .82; }
@keyframes ent-wall-scroll { to { transform: translateX(-100%); } }

/* Credibility strip ------------------------------------------------------ */

.ent-stats {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: linear-gradient(180deg, #FFFFFF 0%, var(--ent-bg-2) 100%);
	border-block: 1px solid var(--ent-line);
}
.ent-stats::before {
	content: "";
	position: absolute;
	inset: -60% -10%;
	z-index: -1;
	background:
		radial-gradient(30% 60% at 20% 50%, rgba(205, 46, 58, .16) 0%, transparent 70%),
		radial-gradient(26% 56% at 74% 50%, rgba(232, 184, 75, .16) 0%, transparent 72%);
	filter: blur(24px);
	animation: ent-aura 30s ease-in-out infinite alternate;
}
.ent-stats__inner {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1rem;
	padding-block: clamp(1.5rem, 2.6vw, 2.25rem);
}

/* Each figure is a torn ticket stub rather than a dashboard tile: a tinted
   counterfoil carrying the icon, a punched perforation, then the figure. The
   counterfoil is painted as a background layer rather than cut with a mask —
   mask-composite splits the card in two across engines. */
.ent-stat {
	--stub: 4.5rem;

	position: relative;
	display: grid;
	grid-template-columns: var(--stub) minmax(0, 1fr);
	grid-template-rows: auto auto;
	align-content: center;
	gap: .375rem 0;
	min-height: 6.5rem;
	padding: 1.25rem 1.5rem 1.25rem 0;
	border: 1px solid var(--ent-line);
	border-radius: var(--ent-r);
	overflow: hidden;
	background:
		linear-gradient(180deg, rgba(205, 46, 58, .22) 0%, rgba(205, 46, 58, .07) 100%)
			left / var(--stub) 100% no-repeat,
		var(--ent-card);
	transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.ent-stat:hover {
	border-color: rgba(205, 46, 58, .45);
	transform: translateY(-3px);
	box-shadow: 0 18px 40px var(--ent-shadow);
}

/* The perforation the stub would tear along. */
.ent-stat::after {
	content: "";
	position: absolute;
	top: .5rem;
	bottom: .5rem;
	left: var(--stub);
	width: 1px;
	background: repeating-linear-gradient(
		to bottom,
		rgba(16, 47, 92, .28) 0 4px,
		transparent 4px 10px
	);
}

.ent-stat__ico {
	grid-column: 1;
	grid-row: 1 / span 2;
	place-self: center;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	color: var(--ent-accent);
}
.ent-stat__ico svg { width: 22px; height: 22px; }

.ent-stat__num {
	grid-column: 2;
	padding-left: 1.375rem;
	font-size: clamp(1.625rem, 2.6vw, 2.125rem);
	font-weight: 800;
	letter-spacing: -.04em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.ent-stat__label {
	grid-column: 2;
	padding-left: 1.375rem;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--ent-fg-mute);
}

/* Search ----------------------------------------------------------------- */

.ent-search {
	display: flex;
	align-items: center;
	gap: .5rem;
	width: min(100%, 40rem);
	margin-top: 1.375rem;
	padding: .4375rem .4375rem .4375rem 1.125rem;
	background: var(--ent-card);
	border: 1px solid var(--ent-line-2);
	border-radius: 100px;
	box-shadow: 0 14px 34px var(--ent-shadow);
	transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.ent-search:focus-within { border-color: var(--ent-accent-2); box-shadow: 0 14px 34px rgba(205, 46, 58, .22); }

.ent-search__icon { display: flex; flex: none; color: var(--ent-fg-mute); }
.ent-search__icon svg { width: 19px; height: 19px; }

.ent-search__input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: .9375rem;
	color: var(--ent-fg);
	padding-block: .625rem;
}
.ent-search__input::placeholder { color: var(--ent-fg-mute); }
.ent-search__input:focus { outline: none; }
.ent-search__input::-webkit-search-cancel-button { opacity: .5; }
.ent-search__submit { flex: none; }

.ent-hero__popular {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: .5rem .875rem;
	margin-top: 1rem;
	font-size: .8125rem;
	color: var(--ent-fg-mute);
}
.ent-hero__popular a {
	color: var(--ent-fg-soft);
	text-decoration: none;
	border-bottom: 1px solid var(--ent-line-2);
	padding-bottom: 1px;
}
.ent-hero__popular a:hover { color: var(--ent-accent); border-bottom-color: var(--ent-accent); }

/* --------------------------------------------------------------------------
   What K Madang is

   The client's first ask for the landing pages: say plainly what the platform
   is before any of the selling starts. Built as a report spread — statement
   left, evidence right, capabilities ruled underneath — so it reads as a
   masthead rather than as a set of promo tiles.
   -------------------------------------------------------------------------- */

.ent-about__spread {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .88fr);
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: center;
}

/* ---- Statement ---- */

.ent-about__title {
	max-width: 17ch;
	margin-top: .5rem;
	font-size: clamp(1.875rem, 3.9vw, 3.125rem);
	letter-spacing: -.035em;
	line-height: 1.04;
}
.ent-about__title em { font-style: normal; color: var(--ent-accent); }

.ent-about__lede {
	max-width: 52ch;
	margin-top: 1rem;
	font-size: 1rem;
	line-height: 1.75;
	color: var(--ent-fg-soft);
}

.ent-about__actions {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin-top: 1.5rem;
}

/* ---- Supporting photograph ---- */

.ent-shot { margin: 0; }

.ent-shot__frame {
	display: block;
	/* The asset is already cropped to the framed portrait (the shared poster
	   file carries grey letterbox bars), so the frame just matches its ratio
	   and nothing is cut. */
	aspect-ratio: 561 / 432;
	overflow: hidden;
	border-radius: var(--ent-r);
	background: var(--ent-card-2);
	box-shadow: 0 18px 40px var(--ent-shadow);
}

.ent-shot__frame img { width: 100%; height: 100%; object-fit: cover; }

.ent-shot__cap {
	display: flex;
	align-items: baseline;
	gap: .75rem;
	margin-top: .875rem;
	font-size: .75rem;
	line-height: 1.5;
	color: var(--ent-fg-mute);
}

/* Short accent rule, so the caption reads as a credit line rather than as
   another paragraph of body copy. */
.ent-shot__cap::before {
	content: "";
	flex: none;
	width: 18px;
	height: 2px;
	border-radius: 2px;
	background: var(--ent-accent-2);
	transform: translateY(-.25em);
}

/* ---- Spec table ---- */

.ent-spec {
	margin: 1.25rem 0 0;
	border-top: 1px solid var(--ent-line);
}

.ent-spec > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
	padding: .6875rem 0;
	border-bottom: 1px solid var(--ent-line);
}

.ent-spec dt {
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ent-fg-mute);
}

.ent-spec dd {
	margin: 0;
	font-size: .9375rem;
	font-weight: 700;
	letter-spacing: -.01em;
	text-align: right;
	color: var(--ent-fg);
}

/* ---- Capability strip ---- */

/* Four columns divided by hairlines, not four cards. The structure comes from
   the rules alone, which is what keeps it looking like a document. */
.ent-cols {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-top: clamp(2rem, 3.4vw, 2.75rem);
	border-top: 1px solid var(--ent-line-2);
}

.ent-cols > li { display: flex; }
.ent-cols > li + li { border-left: 1px solid var(--ent-line); }

.ent-col {
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 1.625rem clamp(1rem, 1.8vw, 1.75rem) 1.5rem;
	text-decoration: none;
	transition: background-color .25s var(--ease);
}
.ent-col:hover { background: rgba(205, 46, 58, .045); }

.ent-col__label {
	display: block;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--ent-accent);
}

.ent-col__desc {
	display: block;
	flex: 1;
	margin-top: .8125rem;
	font-size: .875rem;
	line-height: 1.6;
	color: var(--ent-fg-soft);
}

.ent-col__go {
	display: inline-flex;
	align-items: center;
	gap: .4375rem;
	margin-top: 1.25rem;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--ent-fg-mute);
	transition: color .25s var(--ease);
}
.ent-col__go i { font-style: normal; transition: transform .25s var(--ease); }
.ent-col:hover .ent-col__go { color: var(--ent-accent); }
.ent-col:hover .ent-col__go i { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Concert listing
   -------------------------------------------------------------------------- */

.ent-list { border-top: 1px solid var(--ent-line); }

.ent-gig {
	position: relative;
	display: grid;
	grid-template-columns: 4.75rem 4.5rem minmax(0, 1fr) auto auto;
	align-items: center;
	gap: 1.5rem;
	padding: 1.25rem 1rem;
	margin-inline: -1rem;
	border-bottom: 1px solid var(--ent-line);
	border-radius: var(--ent-r);
	transition: background-color .2s var(--ease);
}
.ent-gig::before {
	content: "";
	position: absolute;
	left: 0;
	top: .625rem;
	bottom: .625rem;
	width: 2px;
	border-radius: 2px;
	background: var(--ent-accent);
	opacity: 0;
	transition: opacity .2s var(--ease);
}
.ent-gig:hover { background: rgba(205, 46, 58, .045); }
.ent-gig:hover::before { opacity: 1; }

/* The date reads as a stub torn off a ticket rather than loose figures. */
.ent-gig__date {
	display: grid;
	justify-items: center;
	text-align: center;
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
	padding: .5rem .25rem .4375rem;
	background: var(--ent-bg-2);
	border: 1px solid var(--ent-line);
	border-radius: var(--ent-r-sm);
	transition: border-color .2s var(--ease);
}
.ent-gig:hover .ent-gig__date { border-color: rgba(205, 46, 58, .5); }
.ent-gig__dow {
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ent-accent);
}
.ent-gig__day { font-size: 1.75rem; font-weight: 700; letter-spacing: -.03em; margin-block: .1875rem; }
.ent-gig__mon { font-size: .6875rem; font-weight: 600; color: var(--ent-fg-mute); }

.ent-gig__thumb {
	width: 4.5rem;
	height: 4.5rem;
	border-radius: var(--ent-r-sm);
	overflow: hidden;
	background: var(--ent-card-2);
}
.ent-gig__thumb img { width: 100%; height: 100%; object-fit: cover; }

.ent-gig__main { min-width: 0; }
.ent-gig__artist {
	display: inline-block;
	font-size: 1.0625rem;
	font-weight: 700;
	letter-spacing: -.015em;
	text-decoration: none;
	color: var(--ent-fg);
}
.ent-gig__artist:hover { color: var(--ent-accent); }
.ent-gig__artist i { font-weight: 600; color: var(--ent-fg-mute); }
.ent-gig__venue { display: block; margin-top: .3125rem; font-size: .875rem; color: var(--ent-fg-soft); }
.ent-gig__sep { margin-inline: .375rem; opacity: .45; }
.ent-gig__facts {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem .875rem;
	margin-top: .4375rem;
	font-size: .75rem;
	color: var(--ent-fg-mute);
}
.ent-gig__facts span { display: inline-flex; align-items: center; }
.ent-gig__facts span + span::before {
	content: "";
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: currentColor;
	opacity: .5;
	margin-right: .875rem;
}

.ent-gig__status { justify-self: end; }
.ent-gig__action { justify-self: end; }

.ent-list__note {
	margin-top: 1.125rem;
	font-size: .875rem;
	color: var(--ent-fg-mute);
}
.ent-list__note a { color: var(--ent-fg-soft); border-bottom: 1px solid var(--ent-accent); text-decoration: none; }
.ent-list__note a:hover { color: var(--ent-accent); }

/* --------------------------------------------------------------------------
   Artists
   -------------------------------------------------------------------------- */

/* Auto-fit so the row stays even whether the archive yields four artists or
   more, without hard-coding a column count. */
.ent-artists {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 1.25rem;
}
.ent-artist { display: block; text-decoration: none; }
.ent-artist__media {
	position: relative;
	display: block;
	aspect-ratio: 1;
	border-radius: var(--ent-r);
	overflow: hidden;
	background: var(--ent-card-2);
	border: 1px solid var(--ent-line);
	transition: border-color .25s var(--ease);
}
.ent-artist:hover .ent-artist__media {
	border-color: var(--ent-line-2);
	transform: translateY(-3px);
	box-shadow: 0 18px 38px var(--ent-shadow);
}
.ent-artist__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.ent-artist:hover .ent-artist__media img { transform: scale(1.05); }
.ent-artist__live { position: absolute; top: .625rem; left: .625rem; }
.ent-artist__name {
	display: block;
	margin-top: .875rem;
	font-size: .9375rem;
	font-weight: 700;
	letter-spacing: -.01em;
}
.ent-artist__name i { font-weight: 500; color: var(--ent-fg-mute); }
.ent-artist:hover .ent-artist__name { color: var(--ent-accent); }
.ent-artist__note { display: block; margin-top: .25rem; font-size: .75rem; color: var(--ent-fg-mute); }

/* --------------------------------------------------------------------------
   Browse by city
   -------------------------------------------------------------------------- */

/* Atlas backdrop ---------------------------------------------------------

   The section is about where the tour goes, so the ground behind it is a map:
   a drifting graticule, contour rings around the two anchor coasts, and the
   2026 routing drawn as a dashed line that travels, with a ping at each stop.
   All of it is one absolutely-positioned layer with no layout cost, and every
   animation is transform- or background-position-based. */

.ent-citysec { position: relative; }

.ent-atlas {
	position: absolute;
	inset: 0;
	z-index: -1;
	overflow: hidden;
	pointer-events: none;
}

/* Latitude / longitude graticule, panning slowly on the diagonal. */
.ent-atlas__grid {
	position: absolute;
	inset: -12%;
	background-image:
		linear-gradient(to right,  rgba(16, 47, 92, .07) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(16, 47, 92, .07) 1px, transparent 1px);
	background-size: 84px 84px;
	-webkit-mask-image: radial-gradient(78% 74% at 50% 46%, #000 0%, rgba(0, 0, 0, .5) 52%, transparent 80%);
	mask-image: radial-gradient(78% 74% at 50% 46%, #000 0%, rgba(0, 0, 0, .5) 52%, transparent 80%);
	animation: ent-atlas-pan 46s linear infinite;
}

@keyframes ent-atlas-pan {
	from { background-position: 0 0; }
	to   { background-position: 84px 84px; }
}

/* The band the routing lives in — the section head plus a little air, so the
   line clears the tops of the city cards. */
.ent-atlas__run {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	height: clamp(170px, 22%, 260px);
}

.ent-atlas__map,
.ent-atlas__contourmap {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.ent-atlas__contourmap { position: absolute; inset: 0; }

/* Contour rings, breathing rather than spinning — a spin would read as a
   target, and these are meant to read as terrain. */
.ent-atlas__contours {
	fill: none;
	stroke: rgba(205, 46, 58, .18);
	stroke-width: 1;
	transform-box: fill-box;
	transform-origin: center;
	animation: ent-atlas-breathe 22s ease-in-out infinite alternate;
}

@keyframes ent-atlas-breathe {
	from { transform: scale(1);    opacity: .75; }
	to   { transform: scale(1.06); opacity: 1; }
}

/* The routing. The dash pattern scrolls, so the line reads as a journey being
   traced rather than a static border. */
.ent-atlas__route {
	fill: none;
	stroke: var(--ent-accent-2);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 10 12;
	opacity: .45;
	animation: ent-atlas-travel 2.8s linear infinite;
}

/* One full dash period (10 + 12), doubled, so the loop is seamless. */
@keyframes ent-atlas-travel {
	to { stroke-dashoffset: -44; }
}

/* Stops. HTML rather than SVG children so they stay round while the map
   beneath them is stretched. */
.ent-atlas__stop {
	position: absolute;
	width: 10px;
	height: 10px;
	margin: -5px 0 0 -5px;
	border-radius: 50%;
	background: var(--ent-accent-2);
	opacity: .6;
}

.ent-atlas__stop::after {
	content: "";
	position: absolute;
	inset: -3px;
	border-radius: 50%;
	border: 1.5px solid var(--ent-accent-2);
	animation: ent-atlas-ping 3.6s ease-out infinite;
	animation-delay: var(--ping-delay, 0s);
}

@keyframes ent-atlas-ping {
	0%        { transform: scale(.5); opacity: .7; }
	70%, 100% { transform: scale(3.4); opacity: 0; }
}

/* The flight. The wrapper fills the band, so a percentage translate on it is
   band-relative — the one way to trace the curve without a motion path, since
   the map SVG underneath is stretched and its coordinate space is not square.
   The glyph rotates separately so the heading never skews the travel. */
.ent-atlas__flight {
	position: absolute;
	inset: 0;
	animation: ent-atlas-fly 15s linear infinite;
}

.ent-atlas__plane {
	position: absolute;
	left: 0;
	top: 0;
	width: 26px;
	height: 26px;
	margin: -13px 0 0 -13px;
	color: var(--ent-accent-2);
	opacity: .5;
	animation: ent-atlas-heading 15s linear infinite;
}

.ent-atlas__plane svg { width: 100%; height: 100%; display: block; fill: currentColor; }

/* Sampled straight off the routing path above, by arc length in the band's
   stretched space, so the plane sits on the line and its speed stays even.
   Regenerate both blocks together if the path `d` ever changes. */
@keyframes ent-atlas-fly {
	0% { transform: translate(5.000%, 86.957%); }
	5% { transform: translate(9.533%, 84.970%); }
	10% { transform: translate(14.007%, 81.778%); }
	15% { transform: translate(18.468%, 77.344%); }
	20% { transform: translate(22.915%, 71.706%); }
	25% { transform: translate(27.316%, 65.043%); }
	30% { transform: translate(31.705%, 57.549%); }
	35% { transform: translate(36.090%, 49.567%); }
	40% { transform: translate(40.454%, 41.580%); }
	45% { transform: translate(44.830%, 34.017%); }
	50% { transform: translate(49.254%, 27.291%); }
	55% { transform: translate(53.709%, 21.849%); }
	60% { transform: translate(58.187%, 18.105%); }
	65% { transform: translate(62.662%, 15.963%); }
	70% { transform: translate(67.167%, 15.126%); }
	75% { transform: translate(71.661%, 15.215%); }
	80% { transform: translate(76.189%, 15.769%); }
	85% { transform: translate(80.678%, 16.291%); }
	90% { transform: translate(85.169%, 16.330%); }
	95% { transform: translate(89.700%, 15.483%); }
	100% { transform: translate(94.167%, 13.478%); }
}

/* The glyph points north at rest, so heading = tangent angle + 90deg —
   measured after the non-uniform scale, which is what makes it look right. */
@keyframes ent-atlas-heading {
	0% { transform: rotate(87.63deg); }
	5% { transform: rotate(85.53deg); }
	10% { transform: rotate(83.37deg); }
	15% { transform: rotate(81.23deg); }
	20% { transform: rotate(79.23deg); }
	25% { transform: rotate(77.55deg); }
	30% { transform: rotate(76.38deg); }
	35% { transform: rotate(75.91deg); }
	40% { transform: rotate(76.25deg); }
	45% { transform: rotate(77.41deg); }
	50% { transform: rotate(79.31deg); }
	55% { transform: rotate(82.01deg); }
	60% { transform: rotate(84.96deg); }
	65% { transform: rotate(87.51deg); }
	70% { transform: rotate(89.48deg); }
	75% { transform: rotate(90.69deg); }
	80% { transform: rotate(91.07deg); }
	85% { transform: rotate(90.61deg); }
	90% { transform: rotate(89.41deg); }
	95% { transform: rotate(87.59deg); }
	100% { transform: rotate(85.37deg); }
}

/* Horizon: line art of the three coasts, sitting on the section's baseline. */
.ent-atlas__horizon {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2rem;
	padding-inline: var(--gutter);
	padding-bottom: .5rem;
}

.ent-atlas__obj {
	width: clamp(110px, 13vw, 190px);
	height: auto;
	flex: none;
	fill: none;
	stroke: var(--ent-blue);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: .17;
	animation: ent-atlas-bob 12s ease-in-out infinite alternate;
}

.ent-atlas__obj:nth-child(2) { stroke: var(--ent-accent-2); opacity: .15; animation-duration: 15s; animation-delay: -4s; }
.ent-atlas__obj:nth-child(3) { animation-duration: 14s; animation-delay: -8s; }

@keyframes ent-atlas-bob {
	from { transform: translateY(4px); }
	to   { transform: translateY(-5px); }
}

/* Compass rose, turning slowly in the corner. */
.ent-atlas__compass {
	position: absolute;
	top: 3%;
	right: -1.5%;
	width: clamp(88px, 8vw, 132px);
	color: var(--ent-blue);
	opacity: .13;
	animation: ent-atlas-spin 90s linear infinite;
}

.ent-atlas__compass svg { display: block; width: 100%; height: auto; }

@keyframes ent-atlas-spin {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}


.ent-cities {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: 1.25rem;
}

.ent-city {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--ent-line);
	border-radius: var(--ent-r);
	overflow: hidden;
	background: var(--ent-card);
	text-decoration: none;
	transition: border-color .25s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.ent-city:hover {
	border-color: var(--ent-line-2);
	transform: translateY(-4px);
	box-shadow: 0 22px 48px var(--ent-shadow);
}

/* The tour route map doubles as the card art — it is the one image we hold
   that actually says something about the city. */
.ent-city__map {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--ent-card-2);
}
.ent-city__map img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .55s var(--ease);
}
.ent-city:hover .ent-city__map img { transform: scale(1.05); }
.ent-city__map::after {
	content: "";
	position: absolute;
	inset: 0;
	/* The maps are already pale, so this only has to seat the overlaid plates —
	   a heavy scrim would put a dark band back into a bright card. */
	background: linear-gradient(180deg, rgba(10, 24, 48, .2) 0%, rgba(10, 24, 48, .02) 38%, rgba(10, 24, 48, .3) 100%);
}

.ent-city__date {
	position: absolute;
	left: .875rem;
	bottom: .875rem;
	z-index: 2;
	display: grid;
	justify-items: center;
	min-width: 3.25rem;
	padding: .4375rem .5rem .375rem;
	border-radius: var(--ent-r-sm);
	background: rgba(255, 255, 255, .95);
	border: 1px solid var(--ent-line-2);
	color: var(--ent-fg);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	box-shadow: 0 10px 22px rgba(16, 47, 92, .28);
}
.ent-city__date b { font-size: 1.25rem; font-weight: 800; letter-spacing: -.03em; }
.ent-city__date i {
	margin-top: .1875rem;
	font-style: normal;
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .1em;
	color: var(--ent-accent);
}

/* Over a pale map neither tag modifier reads on its own, so both get the same
   paper plate and keep only their colour. */
.ent-city .ent-city__flag.ent-tag {
	position: absolute;
	top: .875rem;
	right: .875rem;
	z-index: 2;
	background: rgba(255, 255, 255, .95);
	border: 1px solid var(--ent-line-2);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	box-shadow: 0 6px 16px rgba(16, 47, 92, .22);
}
.ent-city .ent-city__flag.ent-tag--few { color: var(--ent-accent); }
.ent-city .ent-city__flag.ent-tag--ok  { color: var(--ent-accent); }

.ent-city__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 1.125rem 1.25rem 1.25rem;
}
.ent-city__name {
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -.02em;
}
.ent-city:hover .ent-city__name { color: var(--ent-accent); }
.ent-city__venue {
	margin-top: .3125rem;
	font-size: .8125rem;
	color: var(--ent-fg-mute);
	flex: 1;
}

.ent-city__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1rem;
	padding-top: .875rem;
	border-top: 1px solid var(--ent-line);
}
.ent-city__count { font-size: .75rem; color: var(--ent-fg-mute); }
.ent-city__count span { margin-inline: .25rem; opacity: .5; }
.ent-city__go {
	display: inline-flex;
	align-items: center;
	gap: .4375rem;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ent-accent);
}
.ent-city__go i { font-style: normal; transition: transform .25s var(--ease); }
.ent-city:hover .ent-city__go i { transform: translateX(4px); }

/* Platform links — a quiet strip under the cards. */
.ent-quick {
	margin-top: clamp(2rem, 3.5vw, 3rem);
	padding-top: 1.5rem;
	border-top: 1px solid var(--ent-line);
}
.ent-quick__lead {
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ent-fg-mute);
	margin-bottom: 1rem;
}
.ent-quick__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: .75rem;
}
.ent-quick__item {
	display: block;
	padding: .9375rem 1.125rem;
	border: 1px solid var(--ent-line);
	border-radius: var(--ent-r-sm);
	text-decoration: none;
	transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.ent-quick__item:hover { border-color: var(--ent-line-2); background: var(--ent-card); }
.ent-quick__label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	font-size: .9375rem;
	font-weight: 700;
}
.ent-quick__label i { font-style: normal; color: var(--ent-fg-mute); transition: transform .25s var(--ease), color .25s var(--ease); }
.ent-quick__item:hover .ent-quick__label i { color: var(--ent-accent); transform: translateX(3px); }
.ent-quick__desc { display: block; margin-top: .25rem; font-size: .75rem; color: var(--ent-fg-mute); }

/* --------------------------------------------------------------------------
   Shop
   -------------------------------------------------------------------------- */

.ent-shopsec { position: relative; isolation: isolate; overflow: hidden; }
.ent-shopsec__pattern {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(rgba(16, 47, 92, .2) 1px, transparent 1px);
	background-size: 24px 24px;
	mask-image: linear-gradient(to bottom, #000, transparent 72%);
	-webkit-mask-image: linear-gradient(to bottom, #000, transparent 72%);
	opacity: .38;
}

.ent-products {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem;
}
.ent-product {
	display: flex;
	flex-direction: column;
	height: 100%;
	border: 1px solid var(--ent-line);
	border-radius: var(--ent-r);
	overflow: hidden;
	background: var(--ent-card);
	text-decoration: none;
	transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.ent-product:hover {
	transform: translateY(-4px);
	border-color: var(--ent-line-2);
	box-shadow: 0 22px 48px var(--ent-shadow);
}

.ent-product__media {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: var(--ent-card-2);
}
.ent-product__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .55s var(--ease); }
.ent-product:hover .ent-product__media img { transform: scale(1.05); }

.ent-product__badge {
	position: absolute;
	top: .75rem;
	left: .75rem;
	padding: .3125rem .625rem;
	border-radius: 100px;
	background: var(--ent-accent-2);
	color: #fff;
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* Slides up on hover — a shop affordance without faking a cart action. */
.ent-product__hover {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: .75rem;
	background: var(--ent-accent-2);
	text-align: center;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff;
	transform: translateY(101%);
	transition: transform .3s var(--ease);
}
.ent-product:hover .ent-product__hover,
.ent-product:focus-visible .ent-product__hover { transform: translateY(0); }

.ent-product__body { display: flex; flex-direction: column; flex: 1; padding: 1rem 1.125rem 1.125rem; }
.ent-product__name { font-size: .9375rem; font-weight: 700; letter-spacing: -.01em; }
.ent-product:hover .ent-product__name { color: var(--ent-accent); }
.ent-product__meta { margin-top: .25rem; font-size: .75rem; color: var(--ent-fg-mute); flex: 1; }
.ent-product__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: .875rem;
	padding-top: .875rem;
	border-top: 1px solid var(--ent-line);
}
.ent-product__price { font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ent-product__cta { color: var(--ent-fg-mute); transition: transform .25s var(--ease), color .25s var(--ease); }
.ent-product:hover .ent-product__cta { color: var(--ent-accent); transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Past shows
   -------------------------------------------------------------------------- */

.ent-posters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.ent-poster {
	display: block;
	text-decoration: none;
	border: 1px solid var(--ent-line);
	border-radius: var(--ent-r);
	overflow: hidden;
	background: var(--ent-card);
	transition: border-color .25s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.ent-poster:hover {
	border-color: var(--ent-line-2);
	transform: translateY(-4px);
	box-shadow: 0 22px 48px var(--ent-shadow);
}
.ent-poster__media { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--ent-card-2); }
.ent-poster__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.ent-poster:hover .ent-poster__media img { transform: scale(1.04); }
.ent-poster__year {
	position: absolute;
	top: .75rem;
	left: .75rem;
	padding: .3125rem .5625rem;
	border-radius: 100px;
	background: var(--ent-accent-2);
	color: #fff;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .06em;
	font-variant-numeric: tabular-nums;
}
.ent-poster__body { display: block; padding: .9375rem 1.125rem 1.125rem; }
.ent-poster__name { display: block; font-size: .9375rem; font-weight: 700; }
.ent-poster__name i { font-weight: 500; color: var(--ent-fg-mute); }
.ent-poster__meta { display: block; margin-top: .3125rem; font-size: .75rem; color: var(--ent-fg-mute); }

/* --------------------------------------------------------------------------
   Guides
   -------------------------------------------------------------------------- */

.ent-guides { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.ent-guide {
	display: block;
	border-radius: var(--ent-r);
	overflow: hidden;
	background: var(--ent-card);
	border: 1px solid var(--ent-line);
	text-decoration: none;
	transition: border-color .25s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.ent-guide:hover {
	border-color: var(--ent-line-2);
	transform: translateY(-4px);
	box-shadow: 0 22px 48px var(--ent-shadow);
}
.ent-guide__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ent-card-2); }
.ent-guide__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.ent-guide:hover .ent-guide__media img { transform: scale(1.04); }
.ent-guide__body { display: block; padding: 1.25rem 1.375rem 1.5rem; }
.ent-guide__tag { font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ent-accent); }
.ent-guide__title { margin-top: .5625rem; font-size: 1.0625rem; line-height: 1.35; }
.ent-guide__desc { display: block; margin-top: .5625rem; font-size: .875rem; line-height: 1.65; color: var(--ent-fg-mute); }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1080px) {
	.ent-about__spread { grid-template-columns: minmax(0, 1fr); }
	.ent-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ent-cols > li:nth-child(3) { border-left: 0; }
	.ent-cols > li:nth-child(n+3) { border-top: 1px solid var(--ent-line); }
	.ent-artists { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ent-posters, .ent-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ent-stats__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ent-guides { grid-template-columns: 1fr; }

	.ent-gig {
		grid-template-columns: 4.25rem minmax(0, 1fr) auto;
		grid-template-areas:
			"date main status"
			"date main action";
		gap: .5rem 1.125rem;
		align-items: start;
	}
	.ent-gig__date   { grid-area: date; }
	.ent-gig__thumb  { display: none; }
	.ent-gig__main   { grid-area: main; }
	.ent-gig__status { grid-area: status; justify-self: end; }
	.ent-gig__action { grid-area: action; justify-self: end; align-self: end; }
}

@media (max-width: 640px) {
	.ent-atlas__compass { display: none; }
	.ent-atlas__obj:nth-child(2) { display: none; }
	.ent-atlas__obj { opacity: .12; }
	.ent-cols { grid-template-columns: minmax(0, 1fr); }
	.ent-cols > li + li { border-left: 0; border-top: 1px solid var(--ent-line); }
	.ent-artists, .ent-posters, .ent-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ent-wall__item { width: 5.25rem; }
	.ent-stats__inner { grid-template-columns: 1fr; }
	.ent-search { flex-wrap: wrap; border-radius: var(--ent-r); padding: .875rem; }
	.ent-search__input { flex: 1 1 60%; }
	.ent-search__submit { flex: 1 1 100%; margin-top: .5rem; }

	.ent-gig {
		grid-template-columns: 3.75rem minmax(0, 1fr);
		grid-template-areas:
			"date main"
			"status status"
			"action action";
		gap: .75rem 1rem;
	}
	.ent-gig__status, .ent-gig__action { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
	.ent-tag i,
	.ent-hero__orb,
	.ent-hero__beam,
	.ent-wall__track,
	.ent-atlas__grid,
	.ent-atlas__contours,
	.ent-atlas__route,
	.ent-atlas__stop::after,
	.ent-atlas__compass,
	.ent-atlas__flight,
	.ent-atlas__plane,
	.ent-atlas__obj,
	.ent-dark .signup__bg,
	.ent-section::before,
	.ent-section::after,
	.ent-stats::before { animation: none !important; }
	.ent-product__hover { transform: none; }
	.ent *, .ent *::before, .ent *::after { transition-duration: .001ms !important; }
}

/* ==========================================================================
   Site chrome
   ==========================================================================
   The masthead, discovery strip, newsletter band and footer are shared with
   every other template. style.css already renders them bright, so this block
   is now only the handful of things Home 2 genuinely does differently —
   everything else is deliberately left to the base styles.
   ========================================================================== */

/* The account button takes this template's pill shape and flag red rather than
   the base blue, matching the buttons in the page itself. */
/* Blue, and pill-shaped like the buttons in the page itself. */
.ent-dark .account__cta {
	background: var(--ent-blue-br);
	color: #fff;
	border-radius: 100px;
	box-shadow: 0 6px 18px rgba(17, 99, 206, .3);
}
.ent-dark .account__cta:hover { background: var(--ent-blue); }

.ent-dark .skip-link { background: var(--ent-accent-2); color: #fff; }

/* The hero carries the search on this template, so the strip under the
   masthead would only repeat it. */
.ent-dark .finder { display: none; }

/* Footer ----------------------------------------------------------------- */

/* The flag mark sits on a white chip so its blue half clears the blue footer.
   Home 2 wants that chip tight to the artwork rather than a padded plate. */
.ent-dark .brand--footer .brand__mark {
	height: 30px;
	padding: 1px;
}

/* Newsletter band -------------------------------------------------------- */

/* `.signup` lives in footer.php and is shared by every template, so the
   photograph is swapped in as a CSS background under the `.ent-dark` body
   class instead of editing the markup — other pages keep their own art. */
.ent-dark .signup__bg {
	background-image: url("../img/signup-stage.jpg");
	background-size: cover;
	background-position: 50% 46%;
	background-repeat: no-repeat;
	filter: brightness(1.2) saturate(1.05);
	animation: ent-kenburns 28s ease-in-out infinite alternate;
	will-change: transform;
}
.ent-dark .signup__bg img { display: none; }

@keyframes ent-kenburns {
	from { transform: scale(1) translate3d(0, 0, 0); }
	to   { transform: scale(1.09) translate3d(-1.5%, -1%, 0); }
}

/* Weighted for this photograph rather than the base one: enough brand colour
   for the serif headline and the form to hold, light enough that the faces
   still read. */
.ent-dark .signup__veil {
	background:
		radial-gradient(62% 52% at 50% 44%, rgba(205, 46, 58, .26) 0%, rgba(163, 31, 43, .32) 58%, transparent 82%),
		linear-gradient(180deg, rgba(163, 31, 43, .8) 0%, rgba(205, 46, 58, .42) 42%, rgba(0, 71, 160, .86) 100%);
}

.ent-dark .signup .btn--light { background: var(--ent-blue-br); color: #fff; }
.ent-dark .signup .btn--light:hover { background: var(--ent-blue); }