/*
Theme Name: K Madang
Theme URI: https://kmadang.com/
Author: K Madang
Description: Korean culture platform for the Pacific Northwest. Event-discovery homepage modelled on the client's reference site, rendered in the K Madang identity.
Version: 1.5.4
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kmadang
Tags: one-column, custom-menu, editor-style, featured-images
*/

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	/* Korean flag: red #CD2E3A, blue #0047A0, black #000000, white. */
	--blue:        #0047A0;
	--blue-deep:   #003377;
	--black:       #000000;
	--black-soft:  #0E1A2B;
	--line-light:  rgba(255, 255, 255, .14);

	--mist:        #F1F4F9;
	--mist-deep:   #DFE5EF;
	--paper:       #FFFFFF;

	--ink:         #000000;
	--ink-soft:    #333A44;
	--muted:       #6B7480;
	--line:        rgba(0, 0, 0, .1);
	--line-strong: rgba(0, 0, 0, .18);

	/* Cool near-whites, used by the events section so it does not add another
	   blue surface to a page that already has several. */
	--wash:        #F4F6FA;
	--wash-lite:   #FCFDFF;
	--ink-deep:    #0A0A0B;
	--line-red:    rgba(205, 46, 58, .16);

	--accent:      #CD2E3A;
	--accent-deep: #A31F2B;
	--accent-lite: #E4545F;
	/* Flag blue is too dark to read on the black panels, so emphasis there
	   uses this lightened cast of it. */
	--highlight:   #7FA9EC;

	/* Bright palette.
	   The client asked for a lighter page than the original all-black
	   treatment, so the large panels (hero, past shows, newsletter) now sit on
	   these tinted near-whites and saturated brand colours instead of black.
	   Black is kept only for type. */
	--sky:         #E9F1FD;
	--sky-soft:    #F7FAFF;
	--sky-edge:    #D6E4F8;
	--blush:       #FDF0F1;
	--blue-bright: #1163CE;
	--blue-lite:   #4E90E8;
	--gold:        #E8B84B;
	--line-blue:   rgba(17, 99, 206, .16);

	--font-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
	--font-ui:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-ko:      "Noto Sans KR", "Malgun Gothic", var(--font-ui);

	--wrap:      1320px;
	--gutter:    clamp(1.25rem, 4vw, 3.5rem);
	--section-y: clamp(4.5rem, 9vw, 9rem);
	--radius:    4px;
	--radius-lg: 10px;

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, .05), 0 3px 10px rgba(0, 0, 0, .05);
	--shadow-md: 0 8px 24px rgba(0, 0, 0, .1), 0 2px 6px rgba(0, 0, 0, .05);
	--shadow-xl: 0 40px 90px rgba(0, 0, 0, .55), 0 8px 24px rgba(0, 0, 0, .35);

	--ease:     cubic-bezier(.22, .61, .36, 1);
	--ease-out: cubic-bezier(.16, 1, .3, 1);
}

/* ==========================================================================
   2. Base
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 110px;
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-ui);
	font-size: 16px;
	line-height: 1.6;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
	margin: 0;
	font-weight: 400;
	line-height: 1.06;
	letter-spacing: -.015em;
}

p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; cursor: pointer; }

:focus-visible {
	outline: 2px solid var(--accent-lite);
	outline-offset: 3px;
	border-radius: 2px;
}

.ko, [lang="ko"] { font-family: var(--font-ko); }

.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px; top: 0;
	z-index: 999;
	background: var(--black);
	color: #fff;
	padding: .75rem 1.25rem;
	font-size: .8125rem;
}

.skip-link:focus { left: 1rem; top: 1rem; }

.wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* Film grain — adds tooth to the flat dark panels. */
.grain {
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: .3;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* ==========================================================================
   3. Scroll reveal
   ========================================================================== */

/* Scoped to .js so the content is never hidden if the script fails to run. */
.js [data-reveal] {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .75s var(--ease-out), transform .75s var(--ease-out);
	transition-delay: var(--reveal-delay, 0ms);
}

.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ==========================================================================
   4. Shared components
   ========================================================================== */

.eyebrow {
	margin: 0 0 .875rem;
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--muted);
}

.eyebrow--light { color: rgba(255, 255, 255, .58); }

.section-title {
	font-family: var(--font-display);
	font-size: clamp(2.25rem, 4.6vw, 3.75rem);
	line-height: 1;
	letter-spacing: -.02em;
}

.section-title em {
	font-style: italic;
	color: var(--accent);
}

.section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.5rem 2rem;
	flex-wrap: wrap;
	margin-bottom: clamp(2rem, 3.5vw, 3.25rem);
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--line);
}

.section-head--light { border-bottom-color: var(--line-light); }
.section-head--light .section-title { color: #fff; }
.section-head--light .section-title em { color: var(--highlight); }

/* Buttons */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .875rem 1.5rem;
	border: 1px solid transparent;
	border-radius: var(--radius);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .25s var(--ease), color .25s var(--ease),
	            border-color .25s var(--ease), transform .15s var(--ease),
	            box-shadow .25s var(--ease);
}

.btn:active { transform: translateY(1px); }
.btn--lg { padding: 1.0625rem 2rem; font-size: .78125rem; }

.btn--accent {
	background: var(--accent);
	color: #fff;
	box-shadow: 0 8px 24px rgba(205, 46, 58, .32);
}

.btn--accent:hover {
	background: var(--accent-deep);
	box-shadow: 0 12px 30px rgba(205, 46, 58, .42);
}

.btn--solid { background: var(--blue); color: #fff; }
.btn--solid:hover { background: var(--blue-deep); }

.btn--light { background: var(--mist); color: var(--black); }
.btn--light:hover { background: #fff; }

.btn--ghost { border-color: var(--line-strong); color: var(--ink); }
.btn--ghost:hover { background: var(--blue); border-color: var(--blue); color: #fff; }

/* Arrow link */

.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-decoration: none;
	color: var(--blue);
	border-bottom: 1px solid transparent;
	transition: border-color .25s var(--ease), gap .25s var(--ease), color .25s var(--ease);
}

.link-arrow::after { content: "\2192"; }
.link-arrow:hover { border-bottom-color: currentColor; gap: .75em; }
.link-arrow--light { color: rgba(255, 255, 255, .88); }
.link-arrow--light:hover { color: #fff; }

/* Tags */

.tag {
	display: inline-block;
	padding: .375rem .6875rem;
	border-radius: 2px;
	background: rgba(0, 71, 160, .08);
	color: var(--blue);
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	white-space: nowrap;
}

.tag--warn { background: rgba(205, 46, 58, .1); color: var(--accent-deep); }

/* ==========================================================================
   5. Utility bar
   ========================================================================== */

.utility {
	position: relative;
	z-index: 70;
	background: linear-gradient(90deg, var(--blue) 0%, var(--blue-bright) 48%, var(--accent) 100%);
	color: rgba(255, 255, 255, .84);
	font-size: .75rem;
}

.utility__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 40px;
}

.utility__note {
	margin: 0;
	display: flex;
	align-items: center;
	gap: .5rem;
	letter-spacing: .04em;
}

.utility__pin {
	width: 5px; height: 5px;
	border-radius: 50%;
	background: #fff;
	flex: none;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .3);
}

.utility__links { display: flex; align-items: center; gap: 1.5rem; }

.utility__links a,
.lang {
	color: inherit;
	text-decoration: none;
	background: none;
	border: 0;
	padding: 0;
	font-size: inherit;
	transition: color .2s var(--ease);
}

.utility__links a:hover, .lang:hover { color: #fff; text-decoration: underline; }
.lang { display: inline-flex; gap: .35rem; letter-spacing: .06em; }
.lang__current { color: #fff; font-weight: 600; }
.lang__sep { opacity: .35; }

/* ==========================================================================
   6. Masthead
   ========================================================================== */

.masthead {
	position: sticky;
	top: 0;
	z-index: 60;
	background: var(--paper);
	border-bottom: 1px solid var(--line);
	transition: background-color .35s var(--ease), border-color .35s var(--ease),
	            box-shadow .35s var(--ease);
}

.masthead__inner {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 2.5rem);
	min-height: 76px;
}

.masthead.is-stuck { box-shadow: 0 6px 26px rgba(17, 99, 206, .12); }

/* Brand */

.brand {
	display: inline-flex;
	align-items: center;
	flex: none;
	text-decoration: none;
	color: var(--ink);
}

/* The lockup is the flag bar plus live "K MADANG" text, so the wordmark takes
   whatever colour the surrounding surface sets. */
.brand__lockup {
	display: inline-flex;
	align-items: center;
	gap: .625rem;
}

.brand__mark {
	display: block;
	flex: none;
	width: auto;
	height: 26px;
}

.brand__word {
	font-family: var(--font-ui);
	font-size: 1.375rem;
	font-weight: 800;
	letter-spacing: .06em;
	line-height: 1;
	white-space: nowrap;
}

.brand__lockup--light { color: #fff; }
.brand__lockup--dark  { color: var(--ink); }

.brand--footer { color: #fff; }
.brand--footer .brand__word { font-size: 1.5rem; }

/* The footer sits on flag blue, which would swallow the blue half of the bar,
   so the mark gets a white chip to sit on. */
.brand--footer .brand__mark {
	height: 30px;
	padding: 3px 4px;
	border-radius: 2px;
	background: #fff;
	box-sizing: content-box;
}

/* A logo set in the Customizer replaces the lockup outright. */
.brand__img {
	display: block;
	width: auto;
	height: 30px;
}

/* Nav */

.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }

.nav__list a {
	position: relative;
	display: block;
	padding: .375rem 0;
	font-size: .875rem;
	font-weight: 500;
	text-decoration: none;
	color: var(--ink-soft);
	transition: color .25s var(--ease);
}

.nav__list a::after {
	content: "";
	position: absolute;
	left: 0; right: 100%; bottom: 0;
	height: 1.5px;
	background: var(--accent);
	transition: right .3s var(--ease);
}

.nav__list a:hover { color: var(--ink); }
.nav__list a:hover::after { right: 0; }
.nav__list .current-menu-item > a::after { right: 0; }

/* Actions */

.masthead__actions { display: flex; align-items: center; gap: .75rem; margin-left: auto; }
.nav + .masthead__actions { margin-left: 0; }

/* Account actions */

.account { display: flex; align-items: center; gap: .875rem; }

.account__link {
	display: inline-flex;
	align-items: center;
	gap: .4375rem;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .02em;
	text-decoration: none;
	color: var(--ink-soft);
	white-space: nowrap;
	transition: color .25s var(--ease);
}

.account__link svg { width: 17px; height: 17px; flex: none; }
.account__link:hover { color: var(--blue); }

/* Brighter than the search strip below it, so the two blues read as separate
   surfaces rather than one bleeding into the other. */
.account__cta {
	padding: .6875rem 1.25rem;
	background: var(--blue-bright);
	box-shadow: 0 6px 18px rgba(17, 99, 206, .28);
}

.account__cta:hover { background: var(--blue); }

/* Outline button used inside the drawer. */
.btn--ghost-light {
	border-color: var(--line-strong);
	color: var(--ink);
}

.btn--ghost-light:hover {
	background: var(--blue-bright);
	border-color: var(--blue-bright);
	color: #fff;
}

.drawer__account {
	display: grid;
	gap: .625rem;
	margin-top: 2rem;
}

.burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px; height: 40px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: transparent;
}

.burger span {
	display: block;
	width: 17px; height: 1.5px;
	margin-inline: auto;
	background: var(--ink);
	transition: transform .3s var(--ease), opacity .2s var(--ease);
}

.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ==========================================================================
   7. Finder
   ========================================================================== */

/* Always-on discovery strip, directly under the masthead and above the hero. */
.finder {
	position: relative;
	z-index: 50;
	background: linear-gradient(90deg, var(--blue-bright) 0%, #2F7BE2 60%, var(--blue-lite) 100%);
	padding-block: 1rem;
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .08);
}

.finder__form {
	display: flex;
	align-items: stretch;
	gap: 1px;
	background: rgba(255, 255, 255, .38);
	border-radius: var(--radius);
	overflow: hidden;
	flex-wrap: wrap;
}

.finder__field {
	flex: 1 1 200px;
	min-width: 0;
	background: var(--paper);
	padding: .5625rem 1rem;
}

.finder__field--sm { flex: 0 1 170px; }
.finder__field--grow { flex: 2 1 300px; }

.finder__label {
	display: block;
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--muted);
}

.finder__input {
	width: 100%;
	border: 0;
	padding: .125rem 0;
	font: inherit;
	font-size: .875rem;
	color: var(--ink);
	background: transparent;
}

.finder__input::placeholder { color: #8A93A0; }
.finder__input:focus { outline: none; }
.finder__field:focus-within { box-shadow: inset 0 -2px 0 var(--accent); }
.finder__submit {
	flex: 0 0 auto;
	border-radius: 0;
	padding-inline: 2rem;
	box-shadow: none;
}

.finder__submit svg { width: 16px; height: 16px; }

/* ==========================================================================
   8. Mobile drawer
   ========================================================================== */

.drawer {
	position: fixed;
	inset: 116px 0 0;
	z-index: 55;
	background: linear-gradient(180deg, var(--paper) 0%, var(--sky) 100%);
	padding: 2rem var(--gutter) 3rem;
	overflow-y: auto;
	animation: drawer-in .3s var(--ease-out);
}

@keyframes drawer-in {
	from { opacity: 0; transform: translateY(-12px); }
	to   { opacity: 1; transform: none; }
}

.drawer__list { display: grid; gap: 0; }

.drawer__list a {
	display: block;
	padding: 1rem 0;
	border-bottom: 1px solid var(--line);
	font-family: var(--font-display);
	font-size: 1.875rem;
	color: var(--ink);
	text-decoration: none;
}

/* ==========================================================================
   9. Hero — featured card + promo grid
   ========================================================================== */

.hero {
	position: relative;
	isolation: isolate;
	background: linear-gradient(168deg, var(--paper) 0%, var(--sky) 46%, var(--blush) 100%);
	color: var(--ink);
	overflow: hidden;
	padding-top: clamp(2.5rem, 4.5vw, 4rem);
	padding-bottom: clamp(3rem, 5vw, 4.5rem);
}

.hero__backdrop { position: absolute; inset: 0; z-index: -3; }

.hero__backdrop img {
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center 28%;
	transform: scale(1.06);
	/* The photograph now reads as a faint texture behind a light page rather
	   than as the surface itself. */
	opacity: .16;
}

.hero__veil {
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		radial-gradient(90% 70% at 12% 0%, rgba(78, 144, 232, .30) 0%, rgba(255, 255, 255, 0) 62%),
		radial-gradient(80% 70% at 92% 96%, rgba(205, 46, 58, .16) 0%, rgba(255, 255, 255, 0) 60%),
		linear-gradient(180deg, rgba(255, 255, 255, .78) 0%, rgba(255, 255, 255, .52) 40%, rgba(255, 255, 255, .84) 100%);
}

.hero .grain { z-index: -1; opacity: .12; mix-blend-mode: multiply; }

.hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
	gap: clamp(1rem, 1.5vw, 1.375rem);
	align-items: stretch;
}

/* ---- Featured card ---- */

.feature {
	display: flex;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--paper);
	border: 1px solid var(--line-blue);
	box-shadow: 0 30px 70px rgba(16, 47, 92, .16), 0 6px 18px rgba(16, 47, 92, .08);
}

.feature__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	text-decoration: none;
	color: inherit;
}

.feature__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--sky);
}

.feature__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .8s var(--ease-out);
}

.feature__link:hover .feature__media img { transform: scale(1.04); }

.feature__badge {
	position: absolute;
	top: 1.125rem; left: 1.125rem;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem .875rem;
	border-radius: 100px;
	background: var(--accent);
	border: 1px solid rgba(255, 255, 255, .45);
	box-shadow: 0 8px 22px rgba(205, 46, 58, .35);
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #fff;
}

.feature__pulse {
	width: 6px; height: 6px;
	border-radius: 50%;
	background: #fff;
	animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); }
	50%      { box-shadow: 0 0 0 7px rgba(255, 255, 255, 0); }
}

/* Caption panel. The reference sets this block dark; here it stays paper-white
   so the hero reads bright, with the accent rule doing the emphasis. */
.feature__panel {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: clamp(1.5rem, 2.6vw, 2.25rem);
	background: linear-gradient(180deg, var(--paper) 0%, var(--sky-soft) 100%);
}

.feature__kicker {
	display: block;
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--blue-bright);
	margin-bottom: .875rem;
}

.feature__title {
	position: relative;
	font-family: var(--font-display);
	font-size: clamp(2.25rem, 4.2vw, 3.5rem);
	line-height: 1;
	letter-spacing: -.02em;
	padding-bottom: .875rem;
	margin-bottom: 1rem;
}

.feature__title i {
	font-style: normal;
	font-family: var(--font-ko);
	font-size: .58em;
	color: var(--muted);
	margin-left: .35em;
}

/* Accent underline, the reference's signature detail. */
.feature__title::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 68px; height: 4px;
	border-radius: 2px;
	background: var(--accent);
	transition: width .45s var(--ease-out);
}

.feature__link:hover .feature__title::after { width: 120px; }

.feature__lede {
	display: block;
	max-width: 52ch;
	color: var(--ink-soft);
	font-size: .9375rem;
	line-height: 1.65;
	margin-bottom: 1.5rem;
}

.feature__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem 1.5rem;
	flex-wrap: wrap;
	margin-top: auto;
}

.feature__dates { display: flex; flex-wrap: wrap; gap: .5rem; }

.chip {
	display: inline-flex;
	align-items: baseline;
	gap: .4375rem;
	padding: .4375rem .75rem;
	border: 1px solid var(--line-blue);
	border-radius: 100px;
	background: var(--sky);
	font-size: .6875rem;
	color: var(--ink-soft);
	white-space: nowrap;
}

.chip b {
	font-weight: 700;
	letter-spacing: .08em;
	color: var(--blue);
}

.feature__btn { pointer-events: none; }

/* ---- Promo grid ---- */

.promos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: clamp(1rem, 1.5vw, 1.375rem);
}

.promo {
	display: flex;
	flex-direction: column;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--paper);
	border: 1px solid var(--line-blue);
	text-decoration: none;
	color: inherit;
	box-shadow: 0 12px 30px rgba(16, 47, 92, .1);
	transition: transform .4s var(--ease-out), box-shadow .4s var(--ease);
}

.promo:hover {
	transform: translateY(-4px);
	box-shadow: 0 22px 44px rgba(16, 47, 92, .18);
}

.promo__media {
	display: block;
	flex: 1 1 auto;
	min-height: 118px;
	overflow: hidden;
	background: var(--sky);
}

.promo__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .7s var(--ease-out);
}

.promo:hover .promo__media img { transform: scale(1.07); }

.promo__panel {
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
	padding: .9375rem 1.0625rem 1.125rem;
	background: linear-gradient(180deg, var(--paper) 0%, var(--sky-soft) 100%);
}

.promo__kicker {
	font-size: .5625rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--blue-bright);
	margin-bottom: .3125rem;
}

.promo__title {
	position: relative;
	font-family: var(--font-display);
	font-size: clamp(1.125rem, 1.5vw, 1.375rem);
	line-height: 1.15;
	color: var(--ink);
	padding-bottom: .5rem;
}

.promo__title i {
	font-style: normal;
	font-family: var(--font-ko);
	font-size: .72em;
	color: var(--muted);
	white-space: nowrap;
}

.promo__title::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 26px; height: 2px;
	background: var(--accent);
	transition: width .4s var(--ease-out);
}

.promo:hover .promo__title::after { width: 52px; }

/* ==========================================================================
   10. Ticker
   ========================================================================== */

.ticker {
	background: linear-gradient(90deg, var(--accent) 0%, #E4545F 45%, var(--gold) 100%);
	color: #fff;
	overflow: hidden;
	padding-block: .8125rem;
	border-block: 1px solid rgba(255, 255, 255, .3);
}

.ticker__track {
	display: flex;
	width: max-content;
	animation: ticker 34s linear infinite;
}

.ticker__group {
	display: flex;
	align-items: center;
	gap: 2rem;
	padding-right: 2rem;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ticker__group i { font-style: normal; opacity: .8; }

.ticker__dot {
	width: 4px; height: 4px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .75);
	flex: none;
}

@keyframes ticker {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* ==========================================================================
   11. What K Madang is

   The client's first ask for the landing page: state plainly what the platform
   is, above the fold-and-a-half, before any of the selling starts. Kept
   deliberately bright — paper and sky, no dark panel — since it is the first
   block of prose on the page.
   ========================================================================== */

.intro {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-block: clamp(3.5rem, 7vw, 6.5rem);
	background: linear-gradient(180deg, var(--paper) 0%, var(--sky-soft) 100%);
	border-bottom: 1px solid var(--line-blue);
}

/* Two soft washes of brand colour, so the band has light in it without a
   photograph to load. */
.intro__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.intro__blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(90px);
}

.intro__blob--a {
	top: -28%; left: -6%;
	width: 38vw; height: 38vw;
	max-width: 540px; max-height: 540px;
	background: radial-gradient(circle, rgba(78, 144, 232, .34) 0%, rgba(78, 144, 232, 0) 70%);
}

.intro__blob--b {
	bottom: -34%; right: -8%;
	width: 34vw; height: 34vw;
	max-width: 480px; max-height: 480px;
	background: radial-gradient(circle, rgba(232, 184, 75, .32) 0%, rgba(232, 184, 75, 0) 70%);
}

.intro__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
	gap: clamp(2.25rem, 5vw, 4.5rem);
	align-items: start;
}

/* ---- Summary copy ---- */

.intro__title {
	font-family: var(--font-display);
	font-size: clamp(2.25rem, 4.4vw, 3.5rem);
	line-height: 1.02;
	letter-spacing: -.02em;
	margin-bottom: 1.25rem;
}

.intro__title em { font-style: italic; color: var(--accent); }

.intro__lede {
	max-width: 56ch;
	margin: 0 0 2rem;
	font-size: clamp(1rem, 1.2vw, 1.0625rem);
	line-height: 1.75;
	color: var(--ink-soft);
}

.intro__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem clamp(1.5rem, 3vw, 2.75rem);
	margin: 0 0 2rem;
	padding: 1.25rem 0 0;
	border-top: 1px solid var(--line-blue);
}

.intro__stats > div { display: grid; gap: .25rem; }

.intro__stats dt {
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 2.6vw, 2.375rem);
	line-height: 1;
	color: var(--blue-bright);
}

.intro__stats dd {
	margin: 0;
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--muted);
}

.intro__actions {
	display: flex;
	align-items: center;
	gap: 1.25rem 1.75rem;
	flex-wrap: wrap;
	margin: 0;
}

/* ---- The four pillars ---- */

.intro__pillars {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: clamp(.875rem, 1.4vw, 1.125rem);
}

.pillar { display: flex; }

.pillar__link {
	display: flex;
	flex-direction: column;
	gap: .9375rem;
	width: 100%;
	padding: clamp(1.25rem, 1.9vw, 1.625rem);
	border: 1px solid var(--line-blue);
	border-radius: var(--radius-lg);
	background: var(--paper);
	box-shadow: 0 10px 26px rgba(16, 47, 92, .07);
	text-decoration: none;
	color: inherit;
	transition: transform .35s var(--ease-out), box-shadow .35s var(--ease),
	            border-color .35s var(--ease);
}

.pillar__link:hover {
	transform: translateY(-4px);
	border-color: rgba(17, 99, 206, .34);
	box-shadow: 0 20px 42px rgba(16, 47, 92, .14);
}

.pillar__icon {
	display: inline-grid;
	place-items: center;
	width: 46px; height: 46px;
	flex: none;
	border-radius: 12px;
	background: var(--sky);
	color: var(--blue-bright);
	transition: background-color .35s var(--ease), color .35s var(--ease);
}

.pillar__icon svg { width: 23px; height: 23px; display: block; }

.pillar__link:hover .pillar__icon { background: var(--accent); color: #fff; }

.pillar__body { display: block; }

.pillar__title {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(1.25rem, 1.7vw, 1.4375rem);
	line-height: 1.15;
	margin-bottom: .4375rem;
}

.pillar__desc {
	display: block;
	font-size: .8125rem;
	line-height: 1.6;
	color: var(--muted);
}

.pillar__cta {
	display: inline-flex;
	align-items: center;
	gap: .45em;
	margin-top: .9375rem;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--blue-bright);
}

.pillar__cta i {
	font-style: normal;
	transition: transform .3s var(--ease);
}

.pillar__link:hover .pillar__cta i { transform: translateX(4px); }

/* ==========================================================================
   12. On-sale rows

   Deliberately warm rather than green: the page already carries forest on the
   utility bar, search strip, hero, archive, newsletter and footer.
   ========================================================================== */

.dates {
	padding-block: var(--section-y);
	background: var(--paper);
}

.dates__list { display: grid; gap: 1rem; }

.event {
	position: relative;
	display: grid;
	grid-template-columns: 92px 168px minmax(0, 1fr) 172px;
	align-items: center;
	gap: clamp(1rem, 2.2vw, 1.75rem);
	padding: 1.125rem 1.375rem 1.125rem 1.5rem;
	border: 1px solid var(--line-red);
	border-radius: var(--radius-lg);
	background: linear-gradient(105deg, var(--sky) 0%, var(--wash-lite) 58%, var(--blush) 100%);
	color: var(--ink-deep);
	overflow: hidden;
	transition: box-shadow .35s var(--ease), transform .35s var(--ease-out),
	            border-color .35s var(--ease);
}

/* Persimmon-to-gold rail, always visible — the colour cue for the whole row. */
.event::before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 5px;
	background: linear-gradient(180deg, var(--accent) 0%, var(--gold) 55%, var(--blue-lite) 100%);
}

.event:hover {
	transform: translateY(-3px);
	border-color: rgba(163, 31, 43, .3);
	box-shadow: 0 18px 40px rgba(10, 10, 11, .13);
}

/* Date plate — brand blue rather than charcoal, so the row carries colour
   without the persimmon CTA losing its place as the hot spot. */
.event__date {
	display: grid;
	justify-items: center;
	gap: .0625rem;
	padding: .8125rem .5rem;
	border-radius: var(--radius);
	background: linear-gradient(158deg, var(--blue-lite) 0%, var(--blue-bright) 55%, var(--blue) 100%);
	box-shadow: 0 8px 18px rgba(17, 99, 206, .3);
	line-height: 1;
}

.event__month {
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .16em;
	color: var(--gold);
}

.event__day {
	font-family: var(--font-display);
	font-size: 2.5rem;
	line-height: .95;
	letter-spacing: -.02em;
	color: #fff;
}

.event__year {
	font-size: .625rem;
	letter-spacing: .1em;
	color: rgba(255, 255, 255, .55);
}

/* Map thumbnail */

.event__thumb {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--wash);
	box-shadow: 0 6px 16px rgba(10, 10, 11, .14);
}

.event__thumb img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .7s var(--ease-out);
}

.event:hover .event__thumb img { transform: scale(1.06); }

.event__place {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: .875rem .625rem .5rem;
	background: linear-gradient(180deg, rgba(10, 10, 11, 0) 0%, rgba(10, 10, 11, .85) 100%);
	color: #fff;
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* Details */

.event__artist {
	display: flex;
	align-items: center;
	gap: .625rem;
	flex-wrap: wrap;
	margin: 0 0 .375rem;
}

.event__tour {
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #7B8390;
}

.event__tour i { font-style: normal; font-family: var(--font-ko); }

.event__night {
	padding: .1875rem .5rem;
	border: 1px solid rgba(205, 46, 58, .35);
	border-radius: 100px;
	font-size: .5625rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--accent-deep);
}

.event__venue {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 2.1vw, 1.9375rem);
	margin-bottom: .5rem;
	color: var(--ink-deep);
}

.event__meta {
	display: flex;
	flex-wrap: wrap;
	gap: .375rem 1.125rem;
	margin: 0;
	font-size: .8125rem;
	color: #5A626E;
}

.event__meta span { display: inline-flex; align-items: center; gap: .4375rem; }

.event__meta svg {
	width: 15px; height: 15px;
	flex: none;
	color: var(--accent);
}

/* Status pills */

.event .tag {
	background: rgba(0, 71, 160, .16);
	color: #0047A0;
}

.event .tag--warn {
	background: rgba(205, 46, 58, .14);
	color: var(--accent-deep);
}

/* Action column */

.event__action {
	display: grid;
	justify-items: stretch;
	gap: .5rem;
	text-align: center;
}

.event__action .tag { justify-self: center; }

.event__vendor {
	font-size: .625rem;
	letter-spacing: .04em;
	color: #7B8390;
}

.dates__note { margin: 1.75rem 0 0; font-size: .8125rem; color: #5A626E; }

/* ==========================================================================
   13. Legacy gallery (past shows)
   ========================================================================== */

.legacy {
	position: relative;
	isolation: isolate;
	background: linear-gradient(180deg, var(--sky-soft) 0%, var(--sky) 42%, var(--blush) 100%);
	color: var(--ink);
	padding-block: var(--section-y);
	overflow: hidden;
}

.legacy::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -3;
	background: radial-gradient(90% 70% at 15% 0%, rgba(78, 144, 232, .28) 0%, rgba(255, 255, 255, 0) 65%);
}

/* --------------------------------------------------------------------------
   Decorative backdrop
   -------------------------------------------------------------------------- */

.legacy__bg {
	position: absolute;
	inset: 0;
	z-index: -2;
	pointer-events: none;
	overflow: hidden;
}

.legacy .grain { z-index: -1; opacity: .1; mix-blend-mode: multiply; }

/* Hanok window-lattice (창살): a cross grid with a diamond at each crossing. */
.legacy__lattice {
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23C2A35E' stroke-width='1'%3E%3Cpath d='M36 0v72M0 36h72'/%3E%3Crect x='26' y='26' width='20' height='20' transform='rotate(45 36 36)'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 72px 72px;
	opacity: .22;
	/* Fade the pattern away from the centre so it never fights the posters. */
	-webkit-mask-image: radial-gradient(120% 90% at 50% 12%, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 78%);
	mask-image: radial-gradient(120% 90% at 50% 12%, #000 0%, rgba(0, 0, 0, .55) 45%, transparent 78%);
	animation: lattice-drift 60s linear infinite;
}

@keyframes lattice-drift {
	from { background-position: 0 0; }
	to   { background-position: 72px 72px; }
}

/* Soft drifting light. */
.legacy__glow {
	position: absolute;
	border-radius: 50%;
	filter: blur(70px);
	will-change: transform;
}

.legacy__glow--1 {
	top: -14%; left: -8%;
	width: 46vw; height: 46vw;
	max-width: 660px; max-height: 660px;
	background: radial-gradient(circle, rgba(78, 144, 232, .42) 0%, rgba(78, 144, 232, 0) 70%);
	animation: float-a 26s ease-in-out infinite alternate;
}

.legacy__glow--2 {
	bottom: -18%; right: -10%;
	width: 40vw; height: 40vw;
	max-width: 560px; max-height: 560px;
	background: radial-gradient(circle, rgba(232, 184, 75, .34) 0%, rgba(232, 184, 75, 0) 70%);
	animation: float-b 32s ease-in-out infinite alternate;
}

@keyframes float-a {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to   { transform: translate3d(6%, 9%, 0) scale(1.12); }
}

@keyframes float-b {
	from { transform: translate3d(0, 0, 0) scale(1.08); }
	to   { transform: translate3d(-8%, -6%, 0) scale(1); }
}

/* Ring motifs, slowly turning. */
.legacy__ring {
	position: absolute;
	border-radius: 50%;
	will-change: transform;
}

.legacy__ring--lg {
	top: -180px; right: -160px;
	width: 620px; height: 620px;
	border: 1px solid rgba(17, 99, 206, .2);
	animation: spin 90s linear infinite;
}

/* Inner companion ring so it reads as a motif, not a stray circle. */
.legacy__ring--lg::after {
	content: "";
	position: absolute;
	inset: 58px;
	border: 1px dashed rgba(205, 46, 58, .16);
	border-radius: 50%;
}

.legacy__ring--sm {
	bottom: -140px; left: -110px;
	width: 380px; height: 380px;
	border: 1px dashed rgba(17, 99, 206, .16);
	animation: spin 70s linear infinite reverse;
}

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

/* Sparse dot field for depth. */
.legacy__dots {
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(17, 99, 206, .45) 1px, transparent 1px);
	background-size: 26px 26px;
	opacity: .3;
	-webkit-mask-image: radial-gradient(70% 60% at 82% 88%, #000 0%, transparent 70%);
	mask-image: radial-gradient(70% 60% at 82% 88%, #000 0%, transparent 70%);
	animation: dots-drift 40s linear infinite;
}

@keyframes dots-drift {
	from { background-position: 0 0; }
	to   { background-position: 26px -26px; }
}

/* The head modifiers were written for a dark panel; on the bright one they are
   flipped back to ink. Scoped to `.legacy` so the newsletter band, which is
   still reversed, keeps the original treatment. */
.legacy .section-head--light { border-bottom-color: var(--line); }
.legacy .section-head--light .section-title { color: var(--ink); }
.legacy .section-head--light .section-title em { color: var(--accent); }
.legacy .eyebrow--light { color: var(--muted); }
.legacy .link-arrow--light { color: var(--blue-bright); }
.legacy .link-arrow--light:hover { color: var(--blue); }

/* Staggered editorial grid rather than a uniform row. */
.legacy__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.5vw, 2.25rem);
	align-items: start;
}

.show--1 { margin-top: 0; }
.show--2 { margin-top: clamp(1.5rem, 4vw, 3.5rem); }
.show--3 { margin-top: 0; }
.show--4 { margin-top: clamp(1.5rem, 4vw, 3.5rem); }

.show__link { display: block; text-decoration: none; color: inherit; }

.show__media {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--sky-edge);
	box-shadow: 0 20px 44px rgba(16, 47, 92, .18);
}

.show__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .7s var(--ease-out), filter .5s var(--ease);
}

.show__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 58%, rgba(10, 20, 38, .72) 100%);
	opacity: .6;
	transition: opacity .5s var(--ease);
}

.show__link:hover .show__media img { transform: scale(1.07); }
.show__link:hover .show__media::after { opacity: .45; }

.show__year {
	position: absolute;
	left: 1rem; bottom: 1rem;
	z-index: 2;
	padding: .375rem .625rem;
	border-radius: 2px;
	background: var(--accent);
	border: 1px solid rgba(255, 255, 255, .4);
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .14em;
	color: #fff;
}

.show__body { display: block; padding-top: 1.125rem; }

.show__name {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(1.375rem, 1.9vw, 1.625rem);
	line-height: 1.15;
	color: var(--ink);
}

.show__link:hover .show__name { color: var(--blue); }

.show__name i {
	font-style: normal;
	font-size: .68em;
	color: var(--muted);
	margin-left: .45em;
}

.show__meta {
	display: block;
	margin-top: .5rem;
	font-size: .75rem;
	letter-spacing: .04em;
	color: var(--muted);
}

.show__sep { opacity: .5; margin-inline: .3rem; }

/* ==========================================================================
   14. Story
   ========================================================================== */

.story {
	padding-block: var(--section-y);
	background: linear-gradient(180deg, var(--paper) 0%, var(--sky-soft) 55%, var(--sky) 100%);
}

.story__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: center;
}

/* Two offset frames plus a badge, rather than one flat image. */
.story__art { position: relative; padding-bottom: 3.5rem; }

.story__main {
	margin: 0;
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-md);
	aspect-ratio: 4 / 5;
}

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

.story__inset {
	position: absolute;
	right: clamp(-2.5rem, -2vw, -1rem);
	bottom: 0;
	width: clamp(150px, 42%, 230px);
	margin: 0;
	border: 6px solid var(--mist);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-md);
	aspect-ratio: 4 / 3;
}

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

.story__badge {
	position: absolute;
	left: clamp(-2rem, -1.5vw, -.75rem);
	bottom: 4.5rem;
	display: flex;
	align-items: center;
	gap: .875rem;
	margin: 0;
	padding: 1rem 1.25rem;
	border-radius: var(--radius-lg);
	background: var(--blue);
	color: #fff;
	box-shadow: 0 18px 40px rgba(0, 0, 0, .3);
}

.story__badge-num {
	font-family: var(--font-display);
	font-size: 2.25rem;
	line-height: 1;
	color: var(--highlight);
}

.story__badge-txt {
	font-size: .625rem;
	line-height: 1.45;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .78);
}

.story__title {
	font-family: var(--font-display);
	font-size: clamp(2.25rem, 3.8vw, 3.375rem);
	line-height: 1.02;
	margin-bottom: 2rem;
}

.story__title em { font-style: italic; color: var(--accent); display: block; }

/* Pull quote lifted onto its own card so it separates from the body copy. */
.story__quote {
	margin: 0 0 2rem;
	padding: 1.5rem 1.75rem;
	border-left: 3px solid var(--accent);
	border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
	background: var(--paper);
	box-shadow: var(--shadow-sm);
}

.story__quote blockquote { margin: 0; }

.story__quote p {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(1.1875rem, 1.75vw, 1.4375rem);
	font-style: italic;
	line-height: 1.5;
	color: var(--ink);
}

.story__quote figcaption {
	display: flex;
	align-items: center;
	gap: .625rem;
	margin-top: 1rem;
	font-size: .625rem;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--muted);
}

.story__quote figcaption [lang="ko"] {
	font-size: .8125rem;
	letter-spacing: 0;
	text-transform: none;
	color: var(--blue);
}

.story__quote-sep {
	width: 22px;
	height: 1px;
	background: var(--line-strong);
	flex: none;
}

.story__text {
	max-width: 58ch;
	color: var(--ink-soft);
	font-size: 1rem;
	line-height: 1.75;
	margin-bottom: 2.25rem;
}

/* Facts as a ruled list: label left, value right. Reads editorially and
   avoids the ragged wrapping a boxed grid produced at this width. */
.story__facts {
	margin: 0 0 2.25rem;
	border-top: 1px solid var(--line);
}

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

.story__facts dt {
	flex: none;
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--muted);
}

.story__facts dd {
	margin: 0;
	text-align: right;
	font-family: var(--font-display);
	font-size: 1.1875rem;
	line-height: 1.35;
	color: var(--ink);
}

.story__actions {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	flex-wrap: wrap;
	margin: 0;
}

/* ==========================================================================
   15. Browse
   ========================================================================== */

.browse { padding-block: var(--section-y); }

.browse__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1rem, 1.75vw, 1.5rem);
}

/* Full-bleed portrait tiles: the artwork fills the frame and the copy sits on
   a scrim over it, rather than boxed cards with the image cropped on top. */
.cat {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--sky-edge);
	text-decoration: none;
	color: #fff;
	box-shadow: 0 10px 26px rgba(16, 47, 92, .12);
	transition: transform .5s var(--ease-out), box-shadow .5s var(--ease);
}

.cat:hover {
	transform: translateY(-6px);
	box-shadow: 0 26px 56px rgba(16, 47, 92, .26);
}

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

.cat__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .9s var(--ease-out);
}

.cat:hover .cat__media img { transform: scale(1.07); }

/* Scrim keeps the overlaid copy legible over busy poster art. */
.cat::after {
	content: "";
	position: absolute;
	inset: 0;
	/* Tinted navy instead of flat black, and lifted off the artwork, so the
	   tiles stay bright while the copy still clears contrast. */
	background: linear-gradient(
		180deg,
		rgba(10, 24, 48, .12) 0%,
		rgba(10, 24, 48, .04) 26%,
		rgba(10, 24, 48, .52) 50%,
		rgba(8, 20, 42, .84) 66%,
		rgba(6, 16, 36, .93) 100%
	);
	transition: opacity .5s var(--ease);
}

.cat__num {
	position: absolute;
	top: 1rem; left: 1rem;
	z-index: 2;
	padding: .3125rem .5625rem;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius: 100px;
	background: rgba(17, 99, 206, .55);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	font-size: .5625rem;
	font-weight: 700;
	letter-spacing: .16em;
	color: rgba(255, 255, 255, .9);
}

.cat__body {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	padding: clamp(1.125rem, 1.6vw, 1.5rem);
}

.cat__title {
	font-family: var(--font-display);
	font-size: clamp(1.625rem, 2.2vw, 2rem);
	line-height: 1.05;
	margin-bottom: .5rem;
}

.cat__desc {
	display: block;
	font-size: .8125rem;
	line-height: 1.55;
	color: rgba(255, 255, 255, .84);
}

.cat__cta {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	margin-top: 1rem;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #fff;
}

/* Arrow sits in a ring that fills on hover. */
.cat__cta i {
	display: inline-grid;
	place-items: center;
	width: 26px; height: 26px;
	border: 1px solid rgba(255, 255, 255, .38);
	border-radius: 50%;
	font-style: normal;
	font-size: .75rem;
	transition: background-color .35s var(--ease), border-color .35s var(--ease),
	            transform .35s var(--ease);
}

.cat:hover .cat__cta i {
	background: var(--accent);
	border-color: var(--accent);
	transform: translateX(3px);
}

/* ==========================================================================
   16. Guides
   ========================================================================== */

.guides { padding-block: 0 var(--section-y); }

.guides__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.5rem, 3vw, 2.75rem);
}

.guide__link { display: block; text-decoration: none; color: inherit; }

.guide__media {
	display: block;
	aspect-ratio: 16 / 10;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: var(--sky);
	margin-bottom: 1.25rem;
}

.guide__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .7s var(--ease-out);
}

.guide__link:hover .guide__media img { transform: scale(1.06); }

.guide__tag {
	display: block;
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: .5rem;
}

.guide__title {
	font-family: var(--font-display);
	font-size: clamp(1.375rem, 1.9vw, 1.625rem);
	line-height: 1.18;
	margin-bottom: .5rem;
}

.guide__link:hover .guide__title { color: var(--blue); }

.guide__desc { margin: 0; font-size: .875rem; color: var(--muted); line-height: 1.65; }

/* ==========================================================================
   17. Newsletter
   ========================================================================== */

.signup {
	position: relative;
	isolation: isolate;
	background: var(--blue-bright);
	color: #fff;
	padding-block: clamp(4.5rem, 8vw, 7.5rem);
	text-align: center;
	overflow: hidden;
}

.signup__bg { position: absolute; inset: 0; z-index: -3; }

.signup__bg img {
	width: 100%; height: 100%;
	object-fit: cover;
	object-position: center 35%;
	/* The stage photograph is dark on its own; lifting it keeps the band in
	   step with the rest of the page now that the veil is brand blue. */
	filter: brightness(1.28) saturate(1.08);
}

.signup__veil {
	position: absolute;
	inset: 0;
	z-index: -2;
	/* Brand colour rather than black: the band still reverses out of the
	   photograph, but as a saturated blue-to-red wash instead of a dark hole
	   at the foot of the page. */
	background:
		radial-gradient(70% 110% at 50% 40%, rgba(17, 99, 206, .3) 0%, rgba(0, 71, 160, .6) 76%),
		linear-gradient(180deg, rgba(0, 71, 160, .74) 0%, rgba(17, 99, 206, .4) 40%, rgba(163, 31, 43, .88) 100%);
}

.signup .grain { z-index: -1; opacity: .18; }

.signup__title {
	font-family: var(--font-display);
	font-size: clamp(2.125rem, 4vw, 3.5rem);
	line-height: 1.03;
	margin-bottom: 2rem;
	text-shadow: 0 2px 24px rgba(0, 0, 0, .5);
}

.signup__form {
	display: flex;
	gap: .5rem;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 1rem;
}

.signup__input {
	width: min(360px, 100%);
	padding: .9375rem 1.125rem;
	border: 1px solid rgba(255, 255, 255, .45);
	border-radius: var(--radius);
	background: rgba(255, 255, 255, .16);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: #fff;
	font: inherit;
	font-size: .9375rem;
}

.signup__input::placeholder { color: rgba(255, 255, 255, .72); }

.signup__input:focus {
	outline: none;
	border-color: #fff;
	background: rgba(255, 255, 255, .26);
}

.signup__fine { margin: 0; font-size: .75rem; color: rgba(255, 255, 255, .8); }

/* ==========================================================================
   18. Footer
   ========================================================================== */

.footer {
	background: linear-gradient(180deg, var(--blue-bright) 0%, #0B54BE 55%, var(--blue) 100%);
	color: rgba(255, 255, 255, .82);
	padding-top: clamp(3.5rem, 5vw, 5rem);
	font-size: .875rem;
}

.footer__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr));
	gap: clamp(2rem, 4vw, 3.5rem);
	padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
}

.footer__blurb { max-width: 40ch; margin: 1.375rem 0 1.125rem; line-height: 1.75; }
.footer__contact { margin: 0; line-height: 1.75; }
.footer__contact a { color: #fff; text-decoration: none; border-bottom: 1px solid var(--line-light); }
.footer__contact a:hover { border-bottom-color: currentColor; }

.footer__heading {
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .62);
	margin-bottom: 1.25rem;
}

.footer__list { display: grid; gap: .6875rem; }
.footer__list a { text-decoration: none; transition: color .2s var(--ease), padding-left .25s var(--ease); }
.footer__list a:hover { color: #fff; padding-left: 4px; }

/* Social */

/* Icons only, on one line. */
.social {
	display: flex;
	flex-wrap: wrap;
	gap: .625rem;
}

.social__link {
	display: inline-flex;
	text-decoration: none;
	color: inherit;
}

.social__icon {
	display: inline-grid;
	place-items: center;
	width: 38px; height: 38px;
	flex: none;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	transition: background-color .25s var(--ease), border-color .25s var(--ease),
	            color .25s var(--ease), transform .25s var(--ease);
}

.social__icon svg { width: 18px; height: 18px; display: block; }

.social__link:hover .social__icon {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
	transform: translateY(-2px);
}

.footer__base {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding-block: 1.375rem;
	border-top: 1px solid rgba(255, 255, 255, .2);
	font-size: .75rem;
	color: rgba(255, 255, 255, .62);
}

.footer__base p { margin: 0; }
.footer__legal { display: flex; gap: 1.375rem; }
.footer__legal a { text-decoration: none; }
.footer__legal a:hover { color: #fff; }

/* Homepage footer -----------------------------------------------------------

   Flag red rather than flag blue, scoped to the front page via the `is-front`
   body class so every other template keeps the blue footer. */

.is-front .footer {
	background: linear-gradient(180deg, var(--accent) 0%, #B72734 55%, var(--accent-deep) 100%);
	color: rgba(255, 255, 255, .9);
}

/* Red is a lighter ground than the blue it replaces, so the small reversed
   labels need more of their white back to hold contrast. */
.is-front .footer__heading { color: rgba(255, 255, 255, .78); }
.is-front .footer__base { color: rgba(255, 255, 255, .76); }

/* The band directly above resolves to crimson, which would run straight into a
   red footer with no seam. On the homepage it lands on blue instead, so the
   two surfaces read as separate. */
.is-front .signup__veil {
	background:
		radial-gradient(70% 110% at 50% 40%, rgba(17, 99, 206, .3) 0%, rgba(0, 71, 160, .62) 76%),
		linear-gradient(180deg, rgba(0, 71, 160, .78) 0%, rgba(17, 99, 206, .42) 40%, rgba(0, 51, 119, .9) 100%);
}

/* The social icons fill with the accent on hover, which is invisible against a
   red footer, so they invert instead. */
.is-front .social__link:hover .social__icon {
	background: #fff;
	border-color: #fff;
	color: var(--accent-deep);
}

/* The wordmark's flag bar keeps its white chip, but the mark reads better with
   a touch more room on this ground. */
.is-front .footer__contact a { border-bottom-color: rgba(255, 255, 255, .35); }

/* ==========================================================================
   19. Inner pages
   ========================================================================== */

/* Scoped to the wrapper, not bare `.page`: WordPress also puts a `page` class
   on <body> for every Page, which would pad the whole document top and bottom. */
.wrap.page { padding-block: var(--section-y); }

.page__title {
	font-family: var(--font-display);
	font-size: clamp(2rem, 4vw, 3rem);
	margin-bottom: 2rem;
}

.page__list { display: grid; gap: 2rem; }
.entry__title { font-family: var(--font-display); font-size: 1.625rem; margin-bottom: .5rem; }
.entry__title a { text-decoration: none; }
.entry__title a:hover { color: var(--accent); }

/* ==========================================================================
   20. Responsive
   ========================================================================== */

@media (max-width: 1180px) {
	.nav__list { gap: 1.125rem; }
	.account { gap: .625rem; }
	.account__link span, .account__link { font-size: .78125rem; }
	.hero__inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
	.legacy__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.show--3 { margin-top: clamp(1.5rem, 4vw, 3.5rem); }
	.show--4 { margin-top: 0; }
}

@media (max-width: 1024px) {
	.nav { display: none; }
	.burger { display: flex; }
	.account { display: none; }

	.hero__inner { grid-template-columns: minmax(0, 1fr); gap: clamp(1rem, 2vw, 1.375rem); }
	.intro__inner { grid-template-columns: minmax(0, 1fr); }
	.intro__pillars { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.promos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.event { grid-template-columns: 76px 140px minmax(0, 1fr); }
	.event__action { grid-column: 1 / -1; justify-items: stretch; }
	.event__action .btn { width: 100%; }
	.event__vendor { text-align: center; }
	.story__inner { grid-template-columns: minmax(0, 1fr); }
	.story__art { max-width: 520px; }
	.browse__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.browse__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.guides__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.guides__grid .guide:last-child { display: none; }

	.story__inner { grid-template-columns: minmax(0, 1fr); }
	.story__panel { margin-left: 0; margin-top: -3rem; margin-inline: clamp(1rem, 4vw, 3rem); }

	.footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
	.utility__note { display: none; }
	.utility__inner { justify-content: flex-end; }

	.promos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.intro__pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.feature__foot { flex-direction: column; align-items: flex-start; }
	.feature__btn { width: 100%; }

	.event {
		grid-template-columns: 68px minmax(0, 1fr);
		gap: .875rem 1rem;
	}

	.event__thumb { grid-column: 1 / -1; order: -1; aspect-ratio: 16 / 9; }
	.event__day { font-size: 2rem; }
	.story__facts > div {
		flex-direction: column;
		align-items: flex-start;
		gap: .3125rem;
	}

	.story__facts dd { text-align: left; }
	.story__quote { padding: 1.25rem 1.25rem 1.25rem 1.375rem; }

	/* Collapse to a single query field so the strip stays one line. */
	.finder__field:not(.finder__field--grow) { display: none; }
	.finder__field--grow { flex: 1 1 auto; }
	.finder__submit { padding-inline: 1.25rem; }

	.guides__grid { grid-template-columns: minmax(0, 1fr); }
	.guides__grid .guide:last-child { display: block; }
}

@media (max-width: 640px) {
	.legacy__grid { grid-template-columns: minmax(0, 1fr); }
	.show { margin-top: 0 !important; }
	.browse__grid { grid-template-columns: minmax(0, 1fr); }
	.promos { grid-template-columns: minmax(0, 1fr); }
	.intro__pillars { grid-template-columns: minmax(0, 1fr); }
	.intro__stats { gap: 1rem 1.5rem; }
	/* Sit both on the same baseline, narrow enough that they never collide. */
	.story__badge { left: 0; bottom: 0; padding: .875rem 1rem; }
	.story__badge-num { font-size: 1.75rem; }
	.story__inset { right: 0; bottom: 0; width: 32%; }
	.footer__inner { grid-template-columns: minmax(0, 1fr); }
	.section-head { align-items: flex-start; }
	.footer__base { justify-content: flex-start; }
	.hero__actions { gap: 1.25rem; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	[data-reveal] { opacity: 1 !important; transform: none !important; }
	.ticker__track { animation: none; }

	.legacy__lattice,
	.legacy__glow,
	.legacy__ring,
	.legacy__dots { animation: none !important; }

	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}