/**
 * Ayat Food Theme - main stylesheet.
 *
 * Enqueued via inc/enqueue.php. Add global styles here.
 * The root style.css only carries the WordPress theme header.
 *
 * @package Ayat_Food
 * @since   1.0.0
 */

/* ==========================================================================
   0. Box-sizing reset
   The React source styles exclusively with Tailwind, whose "preflight" base
   layer sets border-box everywhere. Match that so ported rules that pair an
   explicit height/width with padding (e.g. `.ipekci-hero__inner`) size the
   way the design assumes instead of growing by the padding amount.
   ========================================================================== */

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

/*
 * Preflight also sets `html { line-height: 1.5 }`. Without it every element
 * that carries no explicit leading inherits the UA's `normal` (~1.2) instead,
 * which quietly tightens each ported label, eyebrow and caption.
 */
html {
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
}

/* ==========================================================================
   1. Accessibility helpers
   ========================================================================== */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	position: absolute !important;
	word-wrap: normal !important;
}

.skip-link.screen-reader-text:focus {
	background-color: #fff;
	clip: auto;
	clip-path: none;
	color: #111;
	display: block;
	height: auto;
	left: 6px;
	top: 6px;
	line-height: normal;
	padding: 15px 23px 14px;
	width: auto;
	z-index: 100000;
}

/* ==========================================================================
   2. Base typography (design-system foundation from tokens.css)
   ========================================================================== */

body {
	font-family: var(--ipek-font-sans);
	color: var(--ipek-foreground);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/*
 * The React source styles exclusively with Tailwind utilities, whose
 * "preflight" base layer zeroes out default margins on headings and
 * paragraphs. Match that here so ported markup doesn't pick up browser
 * default `<p>`/heading margins that the design never accounts for.
 */
h1,
h2,
h3,
h4,
h5,
h6,
p {
	margin: 0;
}

/*
 * Display headings. Mirrors the base layer in src/styles.css:
 *
 *   h1..h5 { font-family: var(--font-display); font-weight: 600;
 *            letter-spacing: -0.04em; line-height: 0.98; text-wrap: balance; }
 *
 * Tailwind's preflight neutralises the UA's `font-weight: bold` on headings, so
 * the React source renders these at 600 with tight optical tracking, never at
 * the browser default 700/normal. Section classes that need a different size or
 * leading (e.g. a `text-2xl` heading, whose utility also sets line-height)
 * override these per-class.
 */
h1,
h2,
h3,
h4,
h5 {
	font-family: var(--ipek-font-display);
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 0.98;
	text-wrap: balance;
}

/* ==========================================================================
   3. Base layout
   ========================================================================== */

.site-main {
	margin: 0 auto;
	max-width: 1200px;
	padding: calc(76px + 2rem) 1rem 2rem;
	width: 100%;
}

/*
 * The nav (template-parts/navbar.php) is fixed, so non-home content needs
 * top clearance equal to its own height. Below the `lg` breakpoint it's just
 * the mobile bar (76px); at `lg` and up the top info bar sits above it too.
 */
@media (min-width: 1024px) {
	.site-main {
		padding-top: calc(38px + 88px + 2rem);
	}
}

/* Editor-only homepage scaffold notice (front-page.php). */
.ipekci-home-scaffold {
	max-width: 720px;
	margin: 0 auto;
	padding: 4rem 1.5rem;
	text-align: center;
}

/* ==========================================================================
   3b. Scroll-into-view reveal system
   Source of truth: src/components/HomeStorytelling.tsx (StoryReveal/StoryItem)
   + src/lib/design-system.ts (dsContainerVariants/dsItemVariants). Behavior
   lives in assets/js/main.js (initStoryReveal). Shared by every homepage
   section, not just one, so it lives in main.css rather than home.css.
   ========================================================================== */

.story-item {
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity 0.7s var(--ipek-ease-reveal),
		transform 0.7s var(--ipek-ease-reveal);
}

.story-reveal.is-visible .story-item {
	opacity: 1;
	transform: translateY(0);
}

.ipekci-home-scaffold p + p {
	margin-top: 1em;
}

/* ==========================================================================
   3c. Film-grain overlay
   Source of truth: src/styles.css (.grain). Applied to the dark heroes and the
   "Ook klant worden?" CTA on both the homepage and the interior pages, so the
   base rule lives here rather than in home.css. Sections tune the strength by
   overriding the ::after opacity (e.g. .ipekci-klant.grain::after).
   ========================================================================== */

.grain {
	position: relative;
}

.grain::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0.05;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ==========================================================================
   4. Site footer
   ========================================================================== */

/* Premium site footer — mirrors src/components/Footer.tsx. */
.ipekci-footer {
	/* React SoT uses --primary (#da292a) for footer hovers, not legacy #b31217. */
	--footer-primary: var(--primary, #da292a);
	--footer-gold: 200, 164, 107; /* #c8a46b */
	--footer-ink: 20, 20, 20;
	position: relative;
	overflow: hidden;
	background-color: #f6f2ec;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #1a1a1a;
	font-family: var(--ipek-font-sans, "Outfit", system-ui, sans-serif);
}

.ipekci-footer__topline {
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(var(--footer-gold), 0.45), transparent);
}

/* Mirrors React `.ipek-container.site-footer__main` — same max-width + gutters
   as the rest of the site (1480px / gutter scale). py-20 → lg:py-24. */
.ipekci-footer__inner {
	position: relative;
	margin-inline: auto;
	width: 100%;
	max-width: var(--ipek-container);
	padding-inline: var(--ipek-gutter);
	padding-block: 5rem;
}

@media (min-width: 640px) {
	.ipekci-footer__inner {
		padding-inline: var(--ipek-gutter-sm);
	}
}

@media (min-width: 1024px) {
	.ipekci-footer__inner {
		padding-inline: var(--ipek-gutter-lg);
		padding-block: 6rem;
	}
}

@media (min-width: 1280px) {
	.ipekci-footer__inner {
		padding-inline: var(--ipek-gutter-xl);
	}
}

.ipekci-footer__grid {
	display: grid;
	gap: 3rem;
}

/* Column titles (FooterColumnTitle). */
.ipekci-footer__coltitle h4 {
	margin: 0;
	font-size: 10px;
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.28em;
	color: rgba(var(--footer-ink), 0.55);
}

.ipekci-footer__coltitle-rule {
	display: block;
	margin-top: 0.75rem;
	height: 1px;
	width: 2rem;
	background: linear-gradient(90deg, rgba(var(--footer-gold), 0.85), transparent);
}

/* Brand column. */
.ipekci-footer__logo {
	height: 3.5rem;
	width: auto;
}

.ipekci-footer__lead {
	margin: 1.75rem 0 0;
	max-width: 28rem;
	font-size: 15px;
	line-height: 1.75;
	color: rgba(var(--footer-ink), 0.74);
}

.ipekci-footer__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin-top: 1.5rem;
	font-size: 10px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: rgba(var(--footer-ink), 0.5);
}

.ipekci-footer__tag {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
}

.ipekci-footer__tag-dot {
	height: 3px;
	width: 3px;
	transform: rotate(45deg);
	background: rgba(var(--footer-gold), 0.75);
}

.ipekci-footer__social-wrap {
	margin-top: 2rem;
}

.ipekci-footer__social {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 1.25rem;
}

.ipekci-footer__social-link {
	display: grid;
	place-items: center;
	height: 2.75rem;
	width: 2.75rem;
	border-radius: 0.75rem;
	border: 1px solid rgba(var(--footer-ink), 0.1);
	background: rgba(255, 255, 255, 0.9);
	color: rgba(var(--footer-ink), 0.65);
	box-shadow: 0 10px 28px -18px rgba(0, 0, 0, 0.16);
	transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.ipekci-footer__social-link svg {
	transition: transform 0.3s ease;
}

.ipekci-footer__social-link:hover {
	border-color: rgba(var(--footer-gold), 0.45);
	background: #fff;
	color: var(--footer-primary);
	box-shadow: 0 14px 36px -20px rgba(0, 0, 0, 0.2);
}

.ipekci-footer__social-link:hover svg {
	transform: scale(1.05);
}

.ipekci-footer__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: 2.5rem;
	border-radius: 9999px;
	border: 1px solid rgba(179, 18, 23, 0.2);
	background: rgba(255, 255, 255, 0.95);
	padding: 0.75rem 1.5rem;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.22em;
	color: #141414;
	box-shadow: 0 12px 32px -22px rgba(0, 0, 0, 0.18);
	transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.ipekci-footer__cta svg {
	transition: transform 0.3s ease;
}

.ipekci-footer__cta:hover {
	border-color: rgba(179, 18, 23, 0.35);
	background: var(--footer-primary);
	color: #fff;
}

.ipekci-footer__cta:hover svg {
	transform: translate(2px, -2px);
}

/* Sitemap columns. */
.ipekci-footer__sitemap {
	display: grid;
	gap: 2.5rem;
}

.ipekci-footer__links {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem; /* React Producten: space-y-3 */
}

.ipekci-footer__links--menu {
	gap: 0.875rem; /* React Menu: space-y-3.5 */
}

.ipekci-footer__links a {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	font-size: 0.875rem;
	color: rgba(var(--footer-ink), 0.78);
	text-decoration: none;
	transition: color 0.25s ease;
}

.ipekci-footer__link-chev {
	color: rgba(var(--footer-gold), 0.9);
	transition: color 0.25s ease;
}

.ipekci-footer__links a:hover {
	color: var(--footer-primary);
}

.ipekci-footer__links a:hover .ipekci-footer__link-chev {
	color: var(--footer-primary);
}

/* Contact column. */
.ipekci-footer__address {
	margin-top: 1.5rem;
	font-style: normal;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.ipekci-footer__contact-row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.ipekci-footer__contact-row--top {
	align-items: flex-start;
}

.ipekci-footer__contact-icon {
	display: grid;
	place-items: center;
	height: 2.25rem;
	width: 2.25rem;
	flex-shrink: 0;
	border-radius: 0.5rem;
	border: 1px solid rgba(var(--footer-ink), 0.08);
	background: rgba(255, 255, 255, 0.9);
	color: var(--footer-primary);
	box-shadow: 0 8px 20px -16px rgba(0, 0, 0, 0.14);
}

.ipekci-footer__contact-row--top .ipekci-footer__contact-icon {
	margin-top: 0.125rem;
}

.ipekci-footer__contact-text {
	font-size: 0.875rem;
	line-height: 1.625;
	color: rgba(var(--footer-ink), 0.78);
}

.ipekci-footer__contact-text p {
	margin: 0;
}

.ipekci-footer__contact-row a {
	font-size: 0.875rem;
	color: rgba(var(--footer-ink), 0.78);
	text-decoration: none;
	transition: color 0.25s ease;
}

.ipekci-footer__contact-row a:hover {
	color: var(--footer-primary);
}

.ipekci-footer__route-wrap {
	margin-top: 2rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

.ipekci-footer__route {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border-radius: 9999px;
	border: 1px solid rgba(var(--footer-ink), 0.12);
	background: rgba(255, 255, 255, 0.95);
	padding: 0.625rem 1.25rem;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: rgba(var(--footer-ink), 0.85);
	text-decoration: none;
	box-shadow: 0 10px 28px -20px rgba(0, 0, 0, 0.14);
	transition: border-color 0.3s ease, color 0.3s ease;
}

.ipekci-footer__route svg {
	color: var(--footer-primary);
}

.ipekci-footer__route:hover {
	border-color: rgba(179, 18, 23, 0.25);
	color: var(--footer-primary);
}

.ipekci-footer__cert {
	margin-top: 2.5rem;
	border-radius: 18px;
	border: 1px solid rgba(var(--footer-ink), 0.08);
	background: rgba(255, 255, 255, 0.8);
	padding: 1rem;
	box-shadow: 0 12px 32px -24px rgba(0, 0, 0, 0.12);
}

.ipekci-footer__cert-badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: 1rem;
}

.ipekci-footer__cert-chip {
	border-radius: 999px;
	border: 1px solid rgba(var(--footer-ink), 0.1);
	background: #ffffff;
	padding: 0.375rem 0.75rem;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: rgba(var(--footer-ink), 0.7);
}

/* Bottom legal bar. */
.ipekci-footer__bottom {
	position: relative;
	margin-top: 4rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
	border-radius: 18px;
	border: 1px solid rgba(var(--footer-ink), 0.08);
	background: rgba(255, 255, 255, 0.7);
	padding: 1.25rem 1.5rem;
	backdrop-filter: blur(2px);
}

.ipekci-footer__copy {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: rgba(var(--footer-ink), 0.5);
}

.ipekci-footer__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	color: rgba(var(--footer-ink), 0.5);
}

.ipekci-footer__legal a {
	color: inherit;
	text-decoration: none;
	transition: color 0.25s ease;
}

.ipekci-footer__legal a:hover {
	color: var(--footer-primary);
}

@media (min-width: 640px) {
	.ipekci-footer__logo {
		height: 4.25rem;
	}
	.ipekci-footer__sitemap {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 768px) {
	.ipekci-footer__bottom {
		flex-direction: row;
		align-items: center;
	}
}

@media (min-width: 1024px) {
	.ipekci-footer__grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: 3rem; /* React lg:gap-12 */
	}
	.ipekci-footer__brand {
		grid-column: span 4 / span 4;
	}
	.ipekci-footer__sitemap {
		grid-column: span 5 / span 5;
	}
	.ipekci-footer__contact {
		grid-column: span 3 / span 3;
	}
	.ipekci-footer__bottom {
		padding-left: 2rem; /* React lg:px-8 */
		padding-right: 2rem;
	}
}

@media (min-width: 1280px) {
	.ipekci-footer__grid {
		gap: 3.5rem;
	}
}

/* ==========================================================================
   7. Polish layer (QA pass)
   Tap feedback, keyboard focus, touch-target sizing, smooth anchor scrolling
   and the premium mobile action bar. Desktop visuals are intentionally
   untouched: tap feedback is gated behind `@media (hover: none)` and the mobile
   bar is hidden ≥1024px.
   ========================================================================== */

/* Smooth in-page anchor jumps (respecting reduced motion), offset for the
   fixed navbar so targets aren't hidden underneath it. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

html {
	scroll-padding-top: 96px;
}

/* Suppress the default grey/blue tap flash — bespoke feedback is provided. */
a,
button,
[role="button"],
input,
textarea,
select,
label,
.ipekci-meat-hotspot {
	-webkit-tap-highlight-color: transparent;
}

/* Keyboard focus ring (keyboard users only, via :focus-visible), brand gold. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.ipekci-meat-hotspot:focus-visible {
	outline: 2px solid rgba(198, 160, 98, 0.9);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Touch tap feedback (native-app feel). Coarse pointers only → desktop hover
   interactions are unchanged. Buttons dip-scale; cards soften on press. */
@media (hover: none) and (pointer: coarse) {
	.ipek-btn,
	.ipek-btn-wipe,
	.ipek-link-wipe,
	.ipekci-nav-cta,
	.ipekci-ct-submit,
	.ipekci-ct-action,
	.ipekci-as-tab,
	.ipekci-vw-tab,
	.ipekci-as-hero__scroll-cta,
	.ipekci-vw-hero__scroll-cta,
	.ipekci-ct-partner__btn,
	.ipekci-mobilebar__action {
		transition: transform 0.14s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.14s ease, box-shadow 0.3s ease;
	}

	.ipek-btn:active,
	.ipek-btn-wipe:active,
	.ipek-link-wipe:active,
	.ipekci-nav-cta:active,
	.ipekci-ct-submit:active,
	.ipekci-ct-action:active,
	.ipekci-as-tab:active,
	.ipekci-vw-tab:active,
	.ipekci-as-hero__scroll-cta:active,
	.ipekci-vw-hero__scroll-cta:active,
	.ipekci-ct-partner__btn:active,
	.ipekci-mobilebar__action:active {
		transform: scale(0.96);
	}

	/* Cards carry their own transforms (tilt) — soften via opacity on press. */
	.ipekci-as-cardwrap:active,
	.ipekci-vw-card__link:active,
	.ipekci-ct-detail:active,
	.ipekci-vw-more__card:active,
	.ipekci-eind-card:active,
	.ipekci-ov-cat:active,
	.ipekci-ct-reassure__item:active,
	.ipekci-ct-trust__item:active {
		opacity: 0.82;
		transition: opacity 0.12s ease;
	}
}

/* Larger primary touch target: the mobile nav toggle (was 36px → 44px).
   `button.` raises specificity above navbar.css's `.ipekci-nav-toggle`, which
   is enqueued after main.css. */
@media (max-width: 1023px) {
	button.ipekci-nav-toggle {
		height: 48px;
		width: 48px;
		min-height: 48px;
		min-width: 48px;
	}
	}
}

/* Expand the meat-showcase hotspot hit area on touch without changing its
   visible size (WCAG 2.5.5 Target Size). */
@media (hover: none) and (pointer: coarse) {
	.ipekci-meat-hotspot::after {
		content: "";
		position: absolute;
		inset: -12px;
	}
}

/* --- Premium mobile sticky action bar --- */
.ipekci-mobilebar {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 950;
	padding: 0.6rem 0.9rem calc(0.6rem + env(safe-area-inset-bottom, 0px));
	transform: translateY(140%);
	opacity: 0;
	visibility: hidden;
	transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, visibility 0.4s;
	pointer-events: none;
}

.ipekci-mobilebar.is-visible {
	transform: translateY(0);
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

@media (min-width: 1024px) {
	.ipekci-mobilebar {
		display: none;
	}
}

.ipekci-mobilebar__inner {
	display: flex;
	gap: 0.6rem;
	max-width: 34rem;
	margin-inline: auto;
	padding: 0.5rem;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	background: rgba(14, 14, 14, 0.72);
	backdrop-filter: blur(18px) saturate(1.2);
	-webkit-backdrop-filter: blur(18px) saturate(1.2);
	box-shadow: 0 18px 50px -18px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.ipekci-mobilebar__action {
	flex: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 48px;
	border-radius: 999px;
	font-family: var(--ipek-font-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.ipekci-mobilebar__action--ghost {
	color: #f3efe8;
	border: 1px solid rgba(226, 192, 141, 0.4);
	background: rgba(255, 255, 255, 0.04);
}

.ipekci-mobilebar__action--ghost .ipekci-page-icon {
	color: rgba(226, 192, 141, 0.95);
}

.ipekci-mobilebar__action--primary {
	color: #fff;
	background: var(--ipek-primary);
	box-shadow: 0 10px 26px -12px rgba(177, 18, 23, 0.7);
}

@media (prefers-reduced-motion: reduce) {
	.ipekci-mobilebar {
		transition: opacity 0.3s ease, visibility 0.3s;
	}

	.ipekci-mobilebar.is-visible {
		transform: none;
	}
}

/* Device-adaptive microcopy: show "hover" instructions on pointer devices and
   "tap" instructions on touch. Desktop is unchanged (tap copy hidden). */
.ipekci-tap-copy {
	display: none;
}

@media (hover: none) and (pointer: coarse) {
	.ipekci-hover-copy {
		display: none;
	}

	.ipekci-tap-copy {
		display: inline;
	}
}

/* ===================================================================
   §8 — 404 (Pagina niet gevonden)
   Matches React NotFoundComponent — centred light surface, no chrome.
   =================================================================== */

.ipekci-404--react {
	min-height: 100svh;
}

.ipekci-404__shell {
	position: relative;
	display: flex;
	min-height: 100svh;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	background: #faf8f5;
	overflow: hidden;
}

.ipekci-404__glow {
	pointer-events: none;
	position: absolute;
	left: 50%;
	top: 0;
	width: 420px;
	height: 420px;
	transform: translateX(-50%);
	border-radius: 9999px;
	background: radial-gradient(circle, rgba(179, 18, 23, 0.06), transparent 68%);
}

.ipekci-404__content {
	position: relative;
	max-width: 28rem;
	text-align: center;
}

.ipekci-404__logo {
	margin: 0 auto;
	height: 3rem;
	width: auto;
	opacity: 0.9;
}

.ipekci-404__code {
	margin: 2.5rem 0 0;
	font-family: var(--ipek-font-display);
	font-size: clamp(4.5rem, 22vw, 6.5rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.05em;
	color: rgba(20, 20, 20, 0.12);
}

.ipekci-404__heading {
	margin: 0.5rem 0 0;
	font-family: var(--ipek-font-display);
	font-size: clamp(1.5rem, 5vw, 2rem);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.03em;
	color: #141414;
}

.ipekci-404__lede {
	margin: 1rem 0 0;
	font-size: 15px;
	line-height: 1.7;
	color: rgba(20, 20, 20, 0.62);
}

.ipekci-404__actions {
	margin-top: 2rem;
}