/*
Theme Name: Ed's Kitchen
Theme URI: https://edskitchen.com.au
Author: Ed's Kitchen
Description: Production catering theme for Ed's Kitchen — Melbourne film, TV and event catering. Built to the Ed's Kitchen design system: cool slate ink on warm bone paper, one brick accent, square corners, hairlines instead of boxes. All page content is editable from the WordPress admin.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.8
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: eds-kitchen
Tags: catering, business, one-column, custom-logo, custom-menu, featured-images
*/

/* ==========================================================================
   Ed's Kitchen theme styles.
   Design tokens live in assets/css/tokens.css and are enqueued first.
   Never hardcode a value a token already covers.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Layout primitives
   -------------------------------------------------------------------------- */

:root {
	/*
	 * Section rhythm, halved from the design system's clamp(72px, 9vw, 144px)
	 * to cut scrolling on the home page — 129.6px becomes 64.8px at 1440.
	 * Overridden here rather than in tokens.css, which is generated.
	 *
	 * This drives the top and bottom of Services, Why crews rebook, Sample menu
	 * and Reviews, plus the foot of the gallery. The gallery's own top padding
	 * is a separate, tighter value and is deliberately left alone.
	 */
	--section-y: clamp(36px, 4.5vw, 72px);

	/*
	 * The single left rail every element lines up on.
	 *
	 * A section pads by the gutter and then centres a 1240px container inside
	 * what is left, so its content starts at the gutter on narrow screens and
	 * at the centring offset on wide ones. Anything that is full-bleed — the
	 * header, the hero — has to reproduce that same number, otherwise it sits
	 * on its own rail. The percentage resolves against each element's own
	 * containing block, which is the viewport for both of those.
	 */
	--rail: max(var(--gutter), calc((100% - var(--container-max)) / 2));
}

body {
	overflow-x: hidden;
}

.ek-container {
	max-width: var(--container-max);
	margin: 0 auto;
}

.ek-container--narrow {
	max-width: 960px;
	margin: 0 auto;
}

.ek-section {
	padding: var(--section-y) var(--gutter);
}

.ek-section--white {
	background: var(--white);
}

.ek-section--dark {
	background: var(--slate-900);
}

.ek-section--head {
	padding: calc(var(--section-y) + 20px) var(--gutter) var(--section-y-tight);
}

.ek-section--tail {
	padding: 0 var(--gutter) var(--section-y);
}

.ek-skip-link {
	position: absolute;
	top: -100px;
	left: var(--gutter);
	z-index: 500;
	padding: 12px 18px;
	background: var(--slate-900);
	color: var(--bone-50);
	border: 0;
	font: var(--type-button);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
}

.ek-skip-link:focus {
	top: 12px;
}

.ek-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   2. Rules, eyebrows, icons
   -------------------------------------------------------------------------- */

.ek-rule--short {
	display: block;
	width: 56px;
	height: 2px;
	background: var(--brick-700);
}

.ek-rule--short-on-dark {
	background: var(--border-on-dark);
}

.ek-rule--single {
	display: block;
	width: 140px;
	height: 1px;
	background: var(--border-on-dark);
}

.ek-eyebrow {
	font: var(--type-eyebrow);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--text-accent);
}

.ek-icon {
	display: inline-block;
	flex: none;
	vertical-align: middle;
}

.ek-icon svg {
	display: block;
	width: 100%;
	height: 100%;
	stroke: currentColor;
	stroke-width: 1.5;
	fill: none;
}

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */

.ek-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	line-height: 1;
	border-radius: var(--radius-button);
	cursor: pointer;
	text-decoration: none;
	white-space: nowrap;
	user-select: none;
	border: 1px solid transparent;
	transition: var(--transition-color), transform var(--duration-fast) var(--ease-standard);
}

.ek-btn:active {
	transform: var(--press-scale);
}

.ek-btn--sm {
	height: 36px;
	padding: 0 18px;
	font-size: 11px;
	gap: 8px;
}

.ek-btn--md {
	height: 46px;
	padding: 0 26px;
	font-size: 13px;
	gap: 10px;
}

.ek-btn--primary {
	background: var(--brick-700);
	color: var(--text-on-accent);
	border-color: var(--brick-700);
}

.ek-btn--primary:hover,
.ek-btn--primary:focus {
	background: var(--brick-800);
	border-color: var(--brick-800);
	color: var(--text-on-accent);
}

.ek-iconbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border-radius: var(--radius-button);
	cursor: pointer;
	background: transparent;
	transition: var(--transition-color);
}

.ek-iconbtn--sm {
	width: 34px;
	height: 34px;
}

.ek-iconbtn--md {
	width: 44px;
	height: 44px;
}

.ek-iconbtn--outline {
	color: var(--slate-900);
	border: 1px solid var(--slate-300);
}

.ek-iconbtn--outline:hover {
	border-color: var(--slate-900);
	background: rgba(30, 34, 37, .04);
}

.ek-iconbtn--inverse {
	color: var(--bone-100);
	border: 1px solid rgba(246, 242, 235, .35);
}

.ek-iconbtn--inverse:hover {
	background: rgba(246, 242, 235, .12);
	border-color: var(--bone-100);
}

/* --------------------------------------------------------------------------
   4. Section heading
   -------------------------------------------------------------------------- */

.ek-heading {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 720px;
	align-items: flex-start;
	text-align: left;
}

.ek-heading--center {
	align-items: center;
	text-align: center;
	margin: 0 auto;
}

.ek-heading__eyebrow {
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: flex-start;
}

.ek-heading--center .ek-heading__eyebrow {
	align-items: center;
}

.ek-heading__title {
	font: var(--type-h2);
	color: var(--text-heading);
	letter-spacing: var(--tracking-heading);
	margin: 0;
}

.ek-heading__lead {
	font: var(--type-serif-lead);
	color: var(--text-body);
	max-width: 620px;
	margin: 0;
}

.ek-heading--dark .ek-heading__title {
	color: var(--text-on-dark);
}

.ek-heading--dark .ek-heading__lead {
	color: var(--text-on-dark-muted);
}

.ek-heading--dark .ek-eyebrow {
	color: var(--brass-400);
}

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */

.ek-header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	height: var(--header-height);
	display: flex;
	align-items: center;
	gap: 32px;
	/* The bar spans the window; its contents sit on the shared rail. */
	padding: 0 var(--rail);
	background: rgba(252, 250, 247, .92);
	backdrop-filter: saturate(140%) blur(14px);
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	border-bottom: 1px solid var(--border-hairline);
	isolation: isolate;
	transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}

.ek-header__logo {
	position: relative;
	z-index: 1;
	display: block;
	border: 0;
	line-height: 0;
}

/*
 * 279px is the design's 186px wordmark at 1.5x. It shrinks on narrow screens so
 * the logo, Call Jane and the menu button stay on one 84px row: at 390px the
 * three together need 170 + 12 + 155 = 337px inside a 350px content width.
 */
.ek-header__logo img {
	width: clamp(170px, 42vw, 279px);
	height: auto;
	display: block;
}

.ek-nav {
	display: flex;
	gap: 34px;
	margin-left: auto;
	align-items: center;
	position: relative;
	z-index: 1;
}

.ek-nav ul {
	display: flex;
	gap: 34px;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

.ek-nav a {
	display: block;
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--text-muted);
	border-bottom: 1px solid transparent;
	padding-bottom: 4px;
	text-decoration: none;
	transition: var(--transition-color);
}

.ek-nav a:hover {
	color: var(--slate-900);
}

.ek-nav .current-menu-item > a,
.ek-nav .current_page_item > a,
.ek-nav a.is-active {
	color: var(--slate-900);
	border-bottom-color: var(--brick-700);
}

.ek-header__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	position: relative;
	z-index: 1;
}

.ek-header__toggle {
	display: none;
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */

.ek-hero {
	position: relative;
	min-height: 620px;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background: var(--slate-800);
}

.ek-hero__media,
.ek-hero__scrim,
.ek-hero__wash {
	position: absolute;
	inset: 0;
}

.ek-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ek-hero__scrim {
	background: var(--surface-scrim);
}

.ek-hero__wash {
	background: rgba(20, 24, 26, .42);
}

/*
 * Full width with the rail as padding, rather than a centred 1240px box that
 * then pads inward — that double count put the hero text ~22px right of the
 * wordmark and every section heading.
 */
.ek-hero__inner {
	position: relative;
	width: 100%;
	padding: 0 var(--rail) 72px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
	text-align: left;
}

.ek-hero__eyebrow {
	font: var(--type-eyebrow);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--bone-50);
}

/*
 * Wide-tracked caps. The design system pairs --tracking-logo with a matching
 * text-indent, which is right for a centred title: letter-spacing adds its
 * space after every glyph, so the trailing space on each line makes centred
 * text sit visually left, and the indent cancels it.
 *
 * This hero is left-aligned, where text-indent applies to the first line only —
 * it pushed the "P" of PRODUCTION right while CATERING and THAT stayed flush.
 * Left-aligned, the trailing space falls at the ragged right edge where nobody
 * sees it, so no indent is needed. Restore it if the hero is ever centred.
 */
.ek-hero__title {
	font: var(--type-display-2);
	color: var(--bone-50);
	text-transform: uppercase;
	letter-spacing: var(--tracking-logo);
	margin: 0;
	max-width: 16ch;
	text-indent: 0;
}

.ek-hero__title--sentence {
	font: var(--type-h1);
	text-transform: none;
	letter-spacing: var(--tracking-heading);
	max-width: 24ch;
	text-indent: 0;
}

.ek-hero__lead {
	font: var(--type-serif-lead);
	color: rgba(246, 242, 235, .84);
	max-width: 560px;
	margin: 0;
}

/* --------------------------------------------------------------------------
   7. Services — check items
   -------------------------------------------------------------------------- */

.ek-checkgrid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 40px clamp(16px, 2vw, 32px);
	margin-top: 56px;
}

.ek-check {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.ek-check__icon {
	width: 26px;
	height: 26px;
	flex: none;
	margin-top: 2px;
	border-radius: var(--radius-xs);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--brick-200);
	background: var(--brick-50);
	color: var(--brick-700);
}

.ek-check__icon .ek-icon {
	width: 14px;
	height: 14px;
}

.ek-check__icon .ek-icon svg {
	stroke-width: 1.8;
}

.ek-check__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.ek-check__title {
	font: var(--type-h5);
	margin: 0;
	color: var(--text-heading);
}

.ek-check__copy {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.6;
	color: var(--text-muted);
	margin: 0;
}

/* --------------------------------------------------------------------------
   8. Feed cards — why crews rebook
   -------------------------------------------------------------------------- */

.ek-feedgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(16px, 2vw, 32px);
	margin-top: 56px;
}

.ek-feedcard {
	background: var(--surface-card);
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: var(--shadow-xs);
	transition: box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-out-soft);
}

.ek-feedcard:hover {
	box-shadow: var(--shadow-md);
	transform: var(--lift-hover);
}

.ek-feedcard__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--bone-300);
}

.ek-feedcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--duration-slower) var(--ease-out-soft);
}

.ek-feedcard:hover .ek-feedcard__media img {
	transform: var(--image-zoom-hover);
}

.ek-feedcard__body {
	padding: 20px 22px 24px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ek-feedcard__label {
	font-family: var(--font-display);
	font-size: 10px;
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--text-accent);
}

.ek-feedcard__title {
	font: var(--type-h5);
	margin: 0;
}

.ek-feedcard__copy {
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.6;
	color: var(--text-muted);
	margin: 0;
}

/* --------------------------------------------------------------------------
   9. Gallery — from the kitchen
   -------------------------------------------------------------------------- */

.ek-section--gallery {
	padding: clamp(40px, 4.5vw, 64px) var(--gutter) var(--section-y);
}

.ek-gallery__title {
	margin: 0 0 32px;
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--brick-700);
}

.ek-gallery__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: clamp(8px, 1vw, 14px);
}

.ek-gallery__item {
	margin: 0;
	padding: 0;
	border: 0;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--bone-200);
	cursor: pointer;
	display: block;
}

.ek-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform var(--duration-slower) var(--ease-standard);
}

.ek-gallery__item:hover img {
	transform: var(--image-zoom-hover);
}

/* Lightbox */

.ek-lightbox {
	position: fixed;
	inset: 0;
	z-index: var(--z-dialog);
	background: rgba(20, 24, 26, .92);
	display: flex;
	flex-direction: column;
	padding: clamp(20px, 4vw, 56px);
	box-sizing: border-box;
}

.ek-lightbox[hidden] {
	display: none;
}

.ek-lightbox__bar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.ek-lightbox__body {
	flex: 1;
	min-height: 0;
	display: flex;
	align-items: center;
	gap: clamp(16px, 3vw, 40px);
	margin-top: 12px;
}

.ek-lightbox__stage {
	flex: 1;
	min-width: 0;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 22px;
}

.ek-lightbox__stage img {
	width: 100%;
	height: 68vh;
	object-fit: contain;
	display: block;
}

.ek-lightbox__caption {
	margin: 0;
	max-width: 56ch;
	text-align: center;
	font-family: var(--font-serif);
	font-size: 17px;
	line-height: 1.6;
	font-style: italic;
	color: var(--bone-100);
}

/* --------------------------------------------------------------------------
   10. Sample menu
   -------------------------------------------------------------------------- */

.ek-menu {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 72px;
	align-items: stretch;
}

.ek-menu__left {
	display: flex;
	flex-direction: column;
	gap: 40px;
	min-height: 0;
}

/*
 * The docket on the right sets the row height; the photograph flexes to fill
 * whatever the heading below it does not use. Giving it a min-height here makes
 * the left column taller than the docket and stretches the whole section.
 */
.ek-menu__media {
	flex: 1;
	min-height: 0;
	position: relative;
	overflow: hidden;
}

.ek-menu__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ek-docket {
	background: rgba(246, 242, 235, .06);
	border: 1px solid var(--border-on-dark);
	border-radius: var(--radius-card);
	padding: 28px 30px 30px;
	margin: 0;
	align-self: start;
}

.ek-docket__title {
	font: var(--type-eyebrow);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--brass-400);
	margin: 0 0 6px;
}

.ek-docket ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ek-docket li {
	display: grid;
	grid-template-columns: 108px 1fr;
	gap: 20px;
	align-items: baseline;
	padding: 16px 0;
	border-bottom: 1px solid var(--border-on-dark);
}

.ek-docket__label {
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--bone-100);
}

.ek-docket__copy {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.6;
	color: var(--text-on-dark-muted);
}

/* --------------------------------------------------------------------------
   11. Reviews
   -------------------------------------------------------------------------- */

.ek-reviews__stage {
	margin-top: 48px;
	min-height: 320px;
}

.ek-testimonial {
	margin: 0;
	padding: 36px;
	background: var(--surface-card);
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-card);
	display: flex;
	flex-direction: column;
	gap: 22px;
	height: 100%;
}

.ek-testimonial__mark {
	width: 22px;
	height: 22px;
	color: var(--brick-300);
}

.ek-testimonial__mark svg {
	stroke-width: 1.25;
}

.ek-testimonial__quote {
	margin: 0;
	font-family: var(--font-serif);
	font-size: 19px;
	line-height: 1.62;
	color: var(--text-body);
	font-style: italic;
}

.ek-testimonial__caption {
	display: flex;
	flex-direction: column;
	gap: 3px;
	margin-top: auto;
}

.ek-testimonial__name {
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--slate-900);
}

.ek-testimonial__role {
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--text-subtle);
}

.ek-reviews__controls {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	margin-top: 32px;
}

.ek-reviews__dots {
	display: flex;
	gap: 10px;
}

.ek-reviews__dot {
	width: 26px;
	height: 2px;
	padding: 0;
	border: 0;
	cursor: pointer;
	background: var(--slate-200);
	transition: var(--transition-color);
}

.ek-reviews__dot.is-active {
	background: var(--brick-700);
}

.ek-reviews__slide[hidden] {
	display: none;
}

/* --------------------------------------------------------------------------
   12. Credits wall
   -------------------------------------------------------------------------- */

.ek-credits-wall {
	max-width: var(--container-max);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: flex-start;
}

.ek-credits-wall figure {
	margin: 0;
	position: relative;
	overflow: hidden;
	background: var(--slate-900);
	aspect-ratio: var(--ar);
	flex: var(--ar) 1 calc(var(--ar) * 232px);
}

.ek-credits-wall img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ek-credits-wall figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 26px 12px 11px;
	background: linear-gradient(180deg, rgba(20, 24, 26, 0), rgba(20, 24, 26, .82));
	font-family: var(--font-display);
	font-size: 10px;
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--bone-50);
	line-height: 1.4;
}

/* --------------------------------------------------------------------------
   13. Contact
   -------------------------------------------------------------------------- */

.ek-contact-intro {
	max-width: var(--container-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}

.ek-photoframe {
	margin: 0;
	padding: 14px 14px 52px;
	background: var(--white);
	border: 1px solid var(--border-hairline);
	box-shadow: 0 1px 2px rgba(30, 34, 37, .06);
	transform: rotate(-2.5deg);
}

.ek-photoframe img {
	width: 100%;
	height: auto;
	display: block;
}

.ek-contact-grid {
	max-width: var(--container-max);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: clamp(40px, 5vw, 88px);
	align-items: start;
}

.ek-contact-cards {
	display: grid;
	gap: 20px;
}

.ek-contactcard {
	background: var(--surface-card);
	border: 1px solid var(--border-hairline);
	border-radius: var(--radius-card);
	padding: 26px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ek-contactcard__name {
	font: var(--type-h4);
	margin: 0;
}

.ek-contactcard__copy {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.6;
	color: var(--text-muted);
	margin: 0;
}

.ek-contactcard__link {
	margin-top: 8px;
	display: inline-flex;
	gap: 9px;
	align-items: center;
	border: 0;
	text-decoration: none;
	font-family: var(--font-display);
	font-size: 15px;
	letter-spacing: 0.02em;
	color: var(--brick-700);
	align-self: flex-start;
}

.ek-contactcard__link:hover {
	color: var(--brick-900);
	border: 0;
}

.ek-contactcard__link .ek-icon {
	width: 16px;
	height: 16px;
}

/* --------------------------------------------------------------------------
   14. Forms
   -------------------------------------------------------------------------- */

.ek-form {
	display: grid;
	gap: 24px;
}

.ek-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.ek-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ek-field__label {
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: var(--weight-medium);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: var(--text-muted);
}

.ek-field__required {
	color: var(--brick-700);
	margin-left: 4px;
}

.ek-field__hint {
	font-size: 13px;
	color: var(--text-subtle);
	font-family: var(--font-body);
}

.ek-field__error {
	font-size: 13px;
	color: var(--status-danger);
	font-family: var(--font-body);
}

.ek-input,
.ek-select,
.ek-textarea {
	width: 100%;
	height: 50px;
	padding: 0 16px;
	background: var(--white);
	color: var(--slate-900);
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: var(--weight-regular);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-input);
	outline: none;
	transition: var(--transition-color), box-shadow var(--duration-fast) var(--ease-standard);
}

.ek-input:focus,
.ek-select:focus,
.ek-textarea:focus {
	border-color: var(--slate-700);
	box-shadow: var(--shadow-focus);
}

.ek-input[aria-invalid="true"],
.ek-textarea[aria-invalid="true"] {
	border-color: var(--brick-600);
}

.ek-textarea {
	height: auto;
	padding: 14px 16px;
	line-height: 1.6;
	resize: vertical;
}

.ek-selectwrap {
	position: relative;
	display: block;
}

.ek-select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 44px;
	cursor: pointer;
}

.ek-selectwrap__chevron {
	position: absolute;
	right: 15px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--text-muted);
	pointer-events: none;
	width: 17px;
	height: 17px;
}

.ek-form__submit {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}

.ek-form__success {
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--olive-500);
}

.ek-form__failure {
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--status-danger);
}

.ek-honeypot {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */

.ek-footer {
	background: var(--surface-inverse);
	color: var(--text-on-dark);
	padding: var(--section-y-tight) var(--gutter) 40px;
}

.ek-footer__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	gap: 48px;
	align-items: start;
}

.ek-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.ek-footer__logo {
	border: 0;
	line-height: 0;
	display: block;
}

.ek-footer__logo img {
	width: 210px;
	height: auto;
	display: block;
}

.ek-footer__contact {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.ek-footer__contact a,
.ek-footer__contact span {
	display: flex;
	gap: 10px;
	align-items: center;
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--text-on-dark-muted);
	text-decoration: none;
	border: 0;
}

.ek-footer__contact a:hover {
	color: var(--bone-100);
	border: 0;
}

.ek-footer__contact .ek-icon {
	width: 16px;
	height: 16px;
}

.ek-footer__col {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ek-footer__coltitle {
	font: var(--type-eyebrow);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--brass-400);
}

.ek-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ek-footer__col a {
	display: block;
	font-family: var(--font-body);
	font-size: 15px;
	color: var(--text-on-dark-muted);
	text-decoration: none;
	border: 0;
	transition: var(--transition-color);
}

.ek-footer__col a:hover {
	color: var(--bone-100);
	border: 0;
}

.ek-social {
	display: flex;
	gap: 10px;
}

.ek-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	background: transparent;
	border: 1px solid rgba(246, 242, 235, .18);
	border-radius: var(--radius-xs);
	color: var(--bone-100);
	transition: var(--transition-color);
}

.ek-social a:hover {
	border-color: var(--bone-100);
	background: rgba(246, 242, 235, .10);
}

.ek-social .ek-icon {
	width: 19px;
	height: 19px;
}

.ek-footer__base {
	margin-top: 56px;
	padding-top: 24px;
	border-top: 1px solid var(--border-on-dark);
	display: flex;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.ek-footer__note {
	font-family: var(--font-body);
	font-size: 13px;
	color: rgba(246, 242, 235, .45);
	margin: 0;
}

.ek-footer__tagline {
	font-family: var(--font-display);
	font-size: 11px;
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	color: rgba(246, 242, 235, .45);
}

/* --------------------------------------------------------------------------
   16. Fallback page / post content
   -------------------------------------------------------------------------- */

.ek-prose {
	max-width: var(--container-narrow);
	margin: 0 auto;
}

.ek-prose h1,
.ek-prose h2,
.ek-prose h3 {
	margin: 1.6em 0 .6em;
}

.ek-prose h1:first-child,
.ek-prose h2:first-child {
	margin-top: 0;
}

.ek-prose p,
.ek-prose ul,
.ek-prose ol {
	margin: 0 0 1.1em;
}

.ek-prose ul,
.ek-prose ol {
	padding-left: 1.2em;
}

.ek-prose img {
	border-radius: var(--radius-image);
}

/* --------------------------------------------------------------------------
   17. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.ek-checkgrid {
		grid-template-columns: repeat(2, 1fr);
	}

	.ek-feedgrid {
		grid-template-columns: repeat(2, 1fr);
	}

	.ek-gallery__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.ek-menu {
		grid-template-columns: 1fr;
		gap: 48px;
	}

	.ek-menu__media {
		aspect-ratio: 16 / 9;
		flex: none;
		/* aspect-ratio plus a min-height would force the width past the viewport. */
		min-height: 0;
	}

	.ek-contact-intro {
		grid-template-columns: 1fr;
		justify-items: start;
	}

	.ek-photoframe {
		max-width: 300px;
	}

	.ek-contact-grid {
		grid-template-columns: 1fr;
	}

	.ek-footer__grid {
		grid-template-columns: 1fr 1fr;
	}

	.ek-footer__brand {
		grid-column: 1 / -1;
	}
}

/*
 * Below this width the inline nav no longer fits beside the larger wordmark, so
 * it collapses to a panel. The wordmark stays left and Call Jane and the menu
 * button sit against the right gutter, as they do on desktop. The auto margin
 * does the pushing: the nav is out of flow once it becomes a panel, so it can
 * no longer hold the actions over to the right itself.
 */
@media (max-width: 1000px) {
	.ek-header {
		gap: 16px;
	}

	.ek-header__actions {
		margin-left: auto;
	}

	.ek-header__toggle {
		display: inline-flex;
	}

	.ek-nav {
		position: fixed;
		top: var(--header-height);
		left: 0;
		right: 0;
		/* Above the hero, which sits in the root stacking context. */
		z-index: var(--z-header);
		display: none;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 8px var(--gutter) 24px;
		/*
		 * Solid, not frosted. The system allows blur in three places only, and a
		 * nav panel is not one of them — and a backdrop-filter here composites
		 * against the 84px header that contains it, so the hero bleeds through
		 * the lower half of the panel.
		 */
		background: var(--bone-50);
		border-bottom: 1px solid var(--border-hairline);
		box-shadow: var(--shadow-md);
	}

	.ek-nav.is-open {
		display: flex;
	}

	.ek-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		width: 100%;
	}

	.ek-nav li {
		border-bottom: 1px solid var(--border-hairline);
	}

	.ek-nav li:last-child {
		border-bottom: 0;
	}

	.ek-nav a {
		display: flex;
		align-items: center;
		min-height: 52px;
		padding: 0;
		border-bottom: 0;
	}

	.ek-nav .current-menu-item > a,
	.ek-nav .current_page_item > a,
	.ek-nav a.is-active {
		border-bottom: 0;
		color: var(--brick-700);
	}
}

@media (max-width: 720px) {
	.ek-hero {
		min-height: 520px;
	}

	.ek-hero__inner {
		padding-bottom: 56px;
	}

	.ek-checkgrid,
	.ek-feedgrid {
		grid-template-columns: 1fr;
	}

	.ek-checkgrid {
		gap: 32px;
	}

	.ek-gallery__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.ek-credits-wall figure {
		flex-basis: calc(var(--ar) * 150px);
	}

	.ek-form__row {
		grid-template-columns: 1fr;
	}

	.ek-testimonial {
		padding: 26px;
	}

	.ek-docket {
		padding: 22px 20px 24px;
	}

	.ek-docket li {
		grid-template-columns: 1fr;
		gap: 6px;
	}

	.ek-footer__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.ek-lightbox__stage img {
		height: 52vh;
	}

	.ek-lightbox__body {
		gap: 8px;
	}
}

@media (max-width: 420px) {
	/* Tighter gap only — the padding stays on the shared rail. */
	.ek-header {
		gap: 12px;
	}
}