/**
 * iKaruma design layer.
 *
 * Rules taken from the identity guidelines:
 * - Saffron is the single loud accent. If it appears twice on a screen, one is wrong.
 * - Castellana Ink is the neutral frame; advertiser brands are mostly blue, so the
 *   site must never compete with them.
 * - Archivo for display, Source Serif 4 for reading, IBM Plex Mono for numerals.
 * - The mark is a dot with two radiating arcs; the arcs motif recurs as background.
 */

:root {
	--ik-ink: #12183A;
	--ik-ink-2: #2A3160;
	--ik-slate: #5D6488;
	--ik-slate-2: #8B90AB;
	--ik-saffron: #E0921F;
	--ik-saffron-soft: #F5C77A;
	--ik-paper: #F3F3F7;
	--ik-surface: #FBFBFD;
	--ik-line: #D8D9E4;
	--ik-line-soft: #E6E6EF;
	--ik-display: "Archivo", ui-sans-serif, system-ui, -apple-system, sans-serif;
	--ik-body: "Source Serif 4", ui-serif, Georgia, serif;
	--ik-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
	--ik-shadow: 0 1px 2px rgba(18, 24, 58, .06), 0 8px 24px rgba(18, 24, 58, .06);
	--ik-shadow-lift: 0 2px 4px rgba(18, 24, 58, .08), 0 16px 40px rgba(18, 24, 58, .12);
	--ik-radius: 12px;
}

/* ---------- typography ---------- */

body {
	font-family: var(--ik-body);
	font-size: 1.0625rem;
	line-height: 1.62;
	-webkit-font-smoothing: antialiased;
	background: var(--ik-paper);
	color: var(--ik-ink);
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.wp-block-site-title,
.wp-block-button__link,
.wp-block-post-title {
	font-family: var(--ik-display);
	font-weight: 600;
	letter-spacing: -.021em;
	text-wrap: balance;
	color: var(--ik-ink);
}

.wp-block-post-title a { text-decoration: none; color: inherit; }
.wp-block-post-title a:hover { color: var(--ik-ink-2); }

/* Numerals get their own face: every offer iKaruma carries has a number in it. */
.ik-num, .ik-meta, .ik-eyebrow, .wp-block-post-date, time {
	font-family: var(--ik-mono);
	font-variant-numeric: tabular-nums;
}

.ik-eyebrow {
	display: inline-block;
	font-size: .72rem;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--ik-slate-2);
	font-weight: 500;
	margin-bottom: .75rem;
}

a { text-underline-offset: 3px; }
main a:not(.wp-block-button__link):not(.wp-block-post-title a) {
	color: var(--ik-ink);
	text-decoration-color: var(--ik-saffron);
	text-decoration-thickness: 1.5px;
}
main a:not(.wp-block-button__link):hover { color: var(--ik-saffron); }

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

/* ---------- header ---------- */

.bx-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(251, 251, 253, .88);
	backdrop-filter: saturate(180%) blur(12px);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--ik-line-soft);
	padding-top: .75rem !important;
	padding-bottom: .75rem !important;
}

.bx-header .wp-block-site-title a {
	font-family: var(--ik-display);
	font-weight: 600;
	font-size: 1.35rem;
	letter-spacing: -.035em;
	text-decoration: none;
	color: var(--ik-ink);
}

.bx-header .wp-block-navigation a {
	font-family: var(--ik-display);
	font-size: .95rem;
	font-weight: 500;
	color: var(--ik-ink-2);
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: 2px solid transparent;
	transition: color .15s ease, border-color .15s ease;
}
.bx-header .wp-block-navigation a:hover,
.bx-header .wp-block-navigation .current-menu-item a {
	color: var(--ik-ink);
	border-bottom-color: var(--ik-saffron);
}

.bx-header .wp-block-site-logo img { transition: transform .2s ease; }
.bx-header .wp-block-site-logo a:hover img { transform: translateY(-1px); }

/* ---------- hero ---------- */

.bx-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, var(--ik-surface) 0%, var(--ik-paper) 100%);
	border-bottom: 1px solid var(--ik-line-soft);
	padding-top: clamp(3.5rem, 7vw, 6rem) !important;
	padding-bottom: clamp(3rem, 6vw, 5rem) !important;
}

/* The mark's arcs, echoed as a quiet background motif. Decorative only. */
.bx-hero::before {
	content: "";
	position: absolute;
	top: 50%;
	right: -14vw;
	width: min(60vw, 620px);
	aspect-ratio: 1;
	transform: translateY(-50%);
	background:
		radial-gradient(circle at center, transparent 0 38%, rgba(18, 24, 58, .05) 38% 39%, transparent 39%),
		radial-gradient(circle at center, transparent 0 56%, rgba(18, 24, 58, .035) 56% 57%, transparent 57%),
		radial-gradient(circle at center, transparent 0 74%, rgba(224, 146, 31, .10) 74% 75%, transparent 75%);
	pointer-events: none;
}

@media (max-width: 781px) {
	.bx-hero::before { opacity: .5; right: -34vw; }
}

.bx-hero > * { position: relative; z-index: 1; }

.bx-hero-title {
	font-family: var(--ik-display) !important;
	font-size: clamp(2rem, 5.2vw, 3.4rem) !important;
	line-height: 1.08 !important;
	letter-spacing: -.032em;
	max-width: 20ch;
	margin-inline: auto;
	color: var(--ik-ink) !important;
}

.bx-hero-intro {
	font-family: var(--ik-body);
	font-size: clamp(1.05rem, 2vw, 1.3rem) !important;
	line-height: 1.55;
	color: var(--ik-ink-2) !important;
	max-width: 56ch;
	margin-inline: auto;
	margin-top: 1.1rem;
}

/* ---------- buttons ---------- */

.wp-block-button__link,
.wp-element-button {
	font-family: var(--ik-display);
	font-weight: 600;
	font-size: .98rem;
	letter-spacing: -.005em;
	border-radius: 999px;
	padding: .8rem 1.6rem;
	background: var(--ik-ink);
	color: var(--ik-surface);
	border: 1px solid var(--ik-ink);
	box-shadow: 0 1px 2px rgba(18, 24, 58, .12);
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.wp-block-button__link:hover,
.wp-element-button:hover {
	background: var(--ik-ink-2);
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(18, 24, 58, .18);
}

/* The one saffron call to action per screen. */
.ik-cta-saffron .wp-block-button__link,
.wp-block-button.ik-cta-saffron .wp-block-button__link {
	background: var(--ik-saffron);
	border-color: var(--ik-saffron);
	color: var(--ik-ink);
}
.ik-cta-saffron .wp-block-button__link:hover { background: #cf851a; border-color: #cf851a; }

.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--ik-ink);
	border: 1.5px solid var(--ik-line);
	box-shadow: none;
}
.is-style-outline .wp-block-button__link:hover { border-color: var(--ik-ink); background: transparent; }

/* ---------- post cards ---------- */

.bx-post-grid {
	gap: 1.5rem !important;
}

.bx-post-grid > li,
.bx-post-grid .wp-block-post {
	background: var(--ik-surface);
	border: 1px solid var(--ik-line-soft);
	border-radius: var(--ik-radius);
	overflow: hidden;
	box-shadow: var(--ik-shadow);
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
	display: flex;
	flex-direction: column;
}
.bx-post-grid > li:hover,
.bx-post-grid .wp-block-post:hover {
	transform: translateY(-3px);
	box-shadow: var(--ik-shadow-lift);
	border-color: var(--ik-line);
}

.bx-post-grid .wp-block-post-featured-image {
	margin: 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: linear-gradient(135deg, var(--ik-ink) 0%, var(--ik-ink-2) 70%, var(--ik-saffron) 190%);
}
.bx-post-grid .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.bx-post-grid > li:hover .wp-block-post-featured-image img { transform: scale(1.035); }

.bx-post-grid .wp-block-post-title,
.bx-post-grid .wp-block-post-excerpt,
.bx-post-grid .wp-block-post-date {
	padding-inline: 1.25rem;
}
.bx-post-grid .wp-block-post-date {
	padding-top: 1.1rem;
	font-size: .74rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ik-saffron);
}
.bx-post-grid .wp-block-post-title {
	font-size: 1.18rem;
	line-height: 1.25;
	margin: .5rem 0 .35rem;
}
.bx-post-grid .wp-block-post-excerpt {
	font-size: .95rem;
	color: var(--ik-slate);
	padding-bottom: 1.25rem;
}
.bx-post-grid .wp-block-post-excerpt__more-text { display: none; }

/* ---------- sections ---------- */

.ik-section { padding-block: clamp(3rem, 6vw, 4.5rem); }

.ik-section-head {
	max-width: 46ch;
	margin-bottom: 2rem;
}
.ik-section-head h2 {
	font-size: clamp(1.6rem, 3.4vw, 2.15rem);
	line-height: 1.15;
	margin: 0 0 .6rem;
}
.ik-section-head p {
	color: var(--ik-slate);
	font-size: 1.05rem;
	margin: 0;
}

.ik-card {
	background: var(--ik-surface);
	border: 1px solid var(--ik-line-soft);
	border-radius: var(--ik-radius);
	padding: 1.5rem;
	box-shadow: var(--ik-shadow);
	height: 100%;
}
.ik-card h3 {
	font-size: 1.1rem;
	margin: .1rem 0 .5rem;
}
.ik-card p {
	color: var(--ik-slate);
	font-size: .97rem;
	margin: 0;
}

/* Numbered steps: the saffron numeral is the accent, so cards stay neutral. */
.ik-step-num {
	font-family: var(--ik-mono);
	font-size: .85rem;
	font-weight: 500;
	color: var(--ik-saffron);
	letter-spacing: .1em;
}

/* Category chips: the verticals the newsletter actually covers. */
.ik-chips {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
}
.ik-chip {
	font-family: var(--ik-display);
	font-size: .9rem;
	font-weight: 500;
	color: var(--ik-ink-2);
	background: var(--ik-surface);
	border: 1px solid var(--ik-line);
	border-radius: 999px;
	padding: .5rem 1rem;
	transition: border-color .15s ease, transform .15s ease;
}
.ik-chip:hover { border-color: var(--ik-saffron); transform: translateY(-1px); }

/* Subscribe / conversion band on Castellana Ink. */
.ik-band {
	background: var(--ik-ink);
	color: var(--ik-surface);
	border-radius: 0;
	padding-block: clamp(3rem, 6vw, 4.25rem) !important;
	position: relative;
	overflow: hidden;
}
.ik-band::after {
	content: "";
	position: absolute;
	left: -10vw;
	bottom: -60%;
	width: min(52vw, 520px);
	aspect-ratio: 1;
	background:
		radial-gradient(circle at center, transparent 0 62%, rgba(242, 169, 59, .16) 62% 63%, transparent 63%),
		radial-gradient(circle at center, transparent 0 82%, rgba(251, 251, 253, .07) 82% 83%, transparent 83%);
	pointer-events: none;
}
.ik-band > * { position: relative; z-index: 1; }
.ik-band h2, .ik-band h3 { color: var(--ik-surface); }
.ik-band p { color: #C3C6DC; }
.ik-band .wp-block-button__link {
	background: var(--ik-saffron);
	border-color: var(--ik-saffron);
	color: var(--ik-ink);
}
.ik-band .wp-block-button__link:hover { background: var(--ik-saffron-soft); border-color: var(--ik-saffron-soft); }

/* ---------- single post ---------- */

.wp-block-post-content {
	font-size: 1.13rem;
	line-height: 1.72;
}
.wp-block-post-content > * + * { margin-top: 1.35em; }
.wp-block-post-content h2 { font-size: 1.65rem; margin-top: 2.2em; }
.wp-block-post-content h3 { font-size: 1.3rem; margin-top: 1.8em; }
.wp-block-post-content blockquote {
	border-left: 3px solid var(--ik-saffron);
	background: var(--ik-surface);
	margin-inline: 0;
	padding: 1rem 1.5rem;
	border-radius: 0 8px 8px 0;
	font-style: normal;
	color: var(--ik-ink-2);
}
.wp-block-post-content code {
	font-family: var(--ik-mono);
	font-size: .92em;
	background: var(--ik-surface);
	border: 1px solid var(--ik-line-soft);
	border-radius: 4px;
	padding: .1em .35em;
}

.ik-post-meta {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1rem;
	align-items: center;
	font-family: var(--ik-mono);
	font-size: .8rem;
	color: var(--ik-slate-2);
	letter-spacing: .04em;
}
.ik-post-meta .sep { color: var(--ik-line); }

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

.bx-footer {
	background: var(--ik-ink) !important;
	padding-top: clamp(2.5rem, 5vw, 3.5rem) !important;
}
.bx-footer .wp-block-site-title a {
	font-family: var(--ik-display);
	font-weight: 600;
	letter-spacing: -.03em;
	text-decoration: none;
}
.bx-footer .wp-block-site-tagline { color: #9BA0BC; }
.bx-footer .wp-block-navigation a {
	font-family: var(--ik-display);
	font-size: .92rem;
	text-decoration: none;
	color: #C3C6DC;
}
.bx-footer .wp-block-navigation a:hover { color: var(--ik-saffron); }
.bx-footer-separator { border-color: rgba(251, 251, 253, .12) !important; }

.ik-legal {
	font-family: var(--ik-mono);
	font-size: .74rem;
	line-height: 1.7;
	color: #767C9C;
	letter-spacing: .01em;
}
.ik-legal a { color: #9BA0BC; text-decoration-color: rgba(224, 146, 31, .6); }
.ik-legal a:hover { color: var(--ik-saffron); }

.bx-powered-by { color: #5D6488 !important; font-family: var(--ik-mono); font-size: .72rem !important; }
.bx-powered-by a { color: #767C9C; }

/* ---------- motion ---------- */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
	}
	.bx-post-grid > li:hover { transform: none; }
}