/* Kallone Journal - magazine layout for the /blog section. Everything is prefixed kj- and only
   loads on journal pages. Without JavaScript every view falls back to a plain vertical page. */

@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 300 600; font-display: swap;
	src: url(fonts/InterTight-latin.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 300 600; font-display: swap;
	src: url(fonts/InterTight-latin-ext.woff2) format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 300 600; font-display: swap;
	src: url(fonts/InterTight-cyrillic.woff2) format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

/* ---------- tokens ---------- */
body.kj-journal {
	--kj-ink: #0d0d0d;
	--kj-paper: #ffffff;
	--kj-dim: rgba(13, 13, 13, .5);
	--kj-line: rgba(13, 13, 13, .22);
	--kj-sans: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--kj-serif: Lora, Georgia, "Times New Roman", serif;
	--kj-pad: clamp(16px, 1.7vw, 24px);
	--kj-ease: cubic-bezier(.65, 0, .2, 1);
	--kj-top: 0px; /* admin bar */
	margin: 0;
	background: var(--kj-paper);
	color: var(--kj-ink);
	transition: background-color .5s ease;
}
html.kj-dark body.kj-journal {
	--kj-ink: #f1f0ec;
	--kj-paper: #0b0b0b;
	--kj-dim: rgba(241, 240, 236, .5);
	--kj-line: rgba(241, 240, 236, .24);
}
body.kj-journal.admin-bar { --kj-top: 32px; }
@media (max-width: 782px) { body.kj-journal.admin-bar { --kj-top: 46px; } }

/* Site-wide floating widgets would sit on the magazine's corner controls. The contact widget is
   hidden; consent stays reachable through "Cookie settings" in the journal menu. */
body.kj-journal .smt-app,
body.kj-journal #cmplz-manage-consent .cmplz-manage-consent { display: none !important; }

/* The theme wrapper adds spacing between blocks: none in the journal. */
body.kj-journal .wp-site-blocks { padding: 0 !important; }
body.kj-journal .wp-site-blocks > * { margin-block: 0 !important; }

.kj {
	position: relative;
	min-height: 100svh;
	font-family: var(--kj-sans);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.24;
	letter-spacing: -.012em;
	color: var(--kj-ink);
	background: var(--kj-paper);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}
.kj *, .kj *::before, .kj *::after { box-sizing: border-box; }
.kj a { color: inherit; text-decoration: none; }
.kj button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; letter-spacing: inherit; }
.kj img { display: block; max-width: none; }
.kj em, .kj i { font-family: var(--kj-serif); font-style: italic; }
/* The brand name, wherever it appears: the Kallone wordmark (Lora 700, title case, as in the shop header). */
.kj .kj-brand { font-family: var(--kj-serif); font-weight: 700; font-style: normal; text-transform: none; letter-spacing: -.02em; }
.kj-head__left .kj-brand { font-size: 20px; line-height: 1; letter-spacing: -.5px; }
.kj :focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
.kj .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- small building blocks ---------- */

/* Two labels in one line-height mask; .is-swapped (or hover) slides the second one in. */
.kj-swap { display: inline-grid; overflow: hidden; vertical-align: top; line-height: 1.12; }
.kj-swap > span { grid-area: 1 / 1; transition: transform .7s var(--kj-ease); white-space: nowrap; }
.kj-swap > span:nth-child(2) { transform: translateY(105%); }
.is-swapped > .kj-swap > span:nth-child(1), .is-swapped .kj-swap > span:nth-child(1) { transform: translateY(-105%); }
.is-swapped > .kj-swap > span:nth-child(2), .is-swapped .kj-swap > span:nth-child(2) { transform: none; }
.kj-swap--italic > span:nth-child(2) { font-family: var(--kj-serif); font-style: italic; text-transform: none; letter-spacing: -.01em; }
.kj-swap--roman > span:nth-child(1) { font-family: var(--kj-serif); font-style: italic; }
@media (hover: hover) {
	.kj-menu__link:hover .kj-swap > span:nth-child(1), .kj-row__link:hover .kj-swap > span:nth-child(1) { transform: translateY(-105%); }
	.kj-menu__link:hover .kj-swap > span:nth-child(2), .kj-row__link:hover .kj-swap > span:nth-child(2) { transform: none; }
}

/* Lines that rise out of a mask on page load. The mask reaches above the cap height so accents
   on capitals (Ö, Ü, İ, Â, Й) are never cut off; the negative margin keeps the layout unchanged. */
.kj-rise { display: block; overflow: hidden; padding: .2em 0 .04em; margin: -.2em 0 -.04em; }
.kj-rise > span { display: block; transform: translateY(108%); animation: kj-rise 1.15s var(--kj-ease) forwards; animation-delay: var(--kj-delay, .15s); }
@keyframes kj-rise { to { transform: none; } }

/* ---------- header ---------- */
.kj-head {
	position: fixed;
	z-index: 70;
	top: var(--kj-top);
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 22px var(--kj-pad);
	color: #fff;
	mix-blend-mode: difference;
	pointer-events: none;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -.02em;
	text-transform: uppercase;
}
.kj-head > * { pointer-events: auto; }
.kj-head__menu { display: inline-flex; align-items: center; text-transform: uppercase; font-weight: 600; }
.kj-dot { display: inline-block; width: 9px; height: 9px; margin-left: 10px; border-radius: 50%; background: currentColor; transition: transform .5s var(--kj-ease); }
.kj-head__menu[aria-expanded="true"] .kj-dot { transform: scale(.55); }

/* ---------- menu ---------- */
html.kj-menu-open, html.kj-menu-open body { overflow: hidden; }
.kj-menu {
	position: fixed;
	z-index: 60;
	inset: var(--kj-top) 0 0 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr auto;
	padding: 72px var(--kj-pad) var(--kj-pad);
	background: var(--kj-ink);
	color: var(--kj-paper);
	clip-path: inset(0 0 100% 0);
	visibility: hidden;
	transition: clip-path .85s var(--kj-ease), visibility 0s linear .85s;
}
.kj-menu.is-open { clip-path: inset(0); visibility: visible; transition: clip-path .85s var(--kj-ease), visibility 0s; }
.kj-menu__main ul { list-style: none; margin: 0; padding: 0; }
.kj-menu__link { display: inline-block; font-size: clamp(34px, 3.35vw, 54px); line-height: 1.02; letter-spacing: -.035em; }
.kj-menu__main .is-current .kj-swap > span:nth-child(1) { font-family: var(--kj-serif); font-style: italic; letter-spacing: -.01em; opacity: .55; }
.kj-menu__sub { grid-column: 1; grid-row: 2; align-self: end; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 14px; font-weight: 600; letter-spacing: -.02em; }
.kj-menu__langs { display: flex; gap: 12px; margin: 10px 0 4px; }
.kj-menu__langs a { opacity: .45; }
.kj-menu__langs a.is-current, .kj-menu__langs a:hover { opacity: 1; }
.kj-mode__to-light, html.kj-dark .kj-mode__to-dark { display: none; }
html.kj-dark .kj-mode__to-light { display: inline; }
.kj-menu__mark {
	grid-column: 2;
	grid-row: 1 / span 2;
	align-self: end;
	justify-self: end;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	font-size: 10vw;
	line-height: .9;
	letter-spacing: -.02em;
	white-space: nowrap;
	transform: translateY(12%);
	transition: transform 1.1s var(--kj-ease);
}
.kj-menu.is-open .kj-menu__mark { transform: none; }
.kj-menu__mark > span { margin-right: .04em; }

/* ---------- page veil (between page loads) ---------- */
.kj-veil {
	position: fixed;
	z-index: 90;
	inset: 0;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 38px;
	background: var(--kj-paper);
	color: var(--kj-ink);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: -.02em;
	text-transform: uppercase;
	opacity: 0;
	pointer-events: none;
	transition: opacity .38s ease;
}
html.kj-leaving .kj-veil { opacity: 1; pointer-events: auto; }

/* ---------- HOME ---------- */
.kj-home { position: relative; height: 100svh; overflow: hidden; }
.kj-home__stage { position: absolute; inset: 0; container-type: size; }
.kj-home__mark, .kj-slide__mark {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	margin: 0;
	transform: translateY(-50%);
	text-align: center;
	font-family: var(--kj-serif);
	font-size: var(--kj-mark-fs, 19cqw);
	font-weight: 700;
	line-height: .9;
	letter-spacing: -.02em;
	white-space: nowrap;
	color: var(--kj-ink);
}
.kj-slide__mark { color: #fff; }
.kj-mark-2 { display: none; }
.kj-mark-2 > span { display: block; }
.kj-home__slogan, .kj-slide__slogan {
	position: absolute;
	left: var(--kj-pad);
	right: var(--kj-pad);
	bottom: 6.5cqh;
	margin: 0;
	text-align: center;
	font-size: clamp(16px, 1.5vw, 22px);
	line-height: 1.15;
	letter-spacing: -.025em;
	color: var(--kj-ink);
}
.kj-home__slogan .kj-rise, .kj-slide__slogan > span { display: inline-block; vertical-align: top; padding: .2em 0 .04em; margin: -.2em 0 -.04em; }
.kj-home__slogan .kj-rise:nth-child(2) { --kj-delay: .3s; }
.kj-home__slogan em, .kj-slide__slogan em { font-size: 1.04em; }
.kj-slide__slogan { color: #fff; }

/* Each slide covers the stage, clipped to its photo window: inside it, white copies of the
   wordmark and slogan line up with the dark ones underneath, so letters turn white on the photo. */
.kj-slide {
	--bh: 100cqh;
	--bw: calc(var(--bh) * 2 / 3);
	--bt: 0cqh;
	--bl: calc(50cqw - var(--bw) / 2);
	position: absolute;
	inset: 0;
	clip-path: inset(var(--bt) calc(100cqw - var(--bl) - var(--bw)) calc(100cqh - var(--bt) - var(--bh)) var(--bl));
	visibility: hidden;
	opacity: 0;
	/* crossfade: the outgoing photo stays opaque under the incoming one, then fades (so letters never turn grey) */
	transition: opacity .3s ease .3s, visibility 0s linear .6s;
}
.kj-slide.is-landscape { --bh: 70cqh; --bw: calc(var(--bh) * 1.43); --bt: 15cqh; }
.kj-slide.is-active { visibility: visible; opacity: 1; z-index: 2; transition: opacity .3s ease, visibility 0s; }
.kj-slide__win { position: absolute; inset: 0; cursor: pointer; }
.kj-slide__win img { position: absolute; left: var(--bl); top: var(--bt); width: var(--bw); height: var(--bh); object-fit: cover; }
.kj-slide__mark, .kj-slide__slogan { pointer-events: none; }

@media (max-aspect-ratio: 4/5) {
	.kj-home__mark, .kj-slide__mark { top: 46%; }
	.kj-slide { --bw: 62cqw; --bh: calc(var(--bw) * 1.5); --bt: calc(46cqh - var(--bh) / 2); }
	.kj-slide.is-landscape { --bw: 100cqw; --bh: calc(var(--bw) * .7); --bt: calc(46cqh - var(--bh) / 2); }
	.kj-home__slogan, .kj-slide__slogan { bottom: 7cqh; font-size: 15px; }
	.kj-home__slogan .kj-rise:nth-child(2), .kj-slide__slogan > span:nth-child(2) { display: block; }
}

/* ---------- STORIES: carousel ---------- */
.kj-stories { position: relative; }
.kj-empty { display: flex; align-items: center; justify-content: center; min-height: 100svh; margin: 0; padding: var(--kj-pad); font-family: var(--kj-serif); font-style: italic; font-size: clamp(22px, 2vw, 30px); text-align: center; }
.kj-car {
	--kj-card-h: 58svh;
	--kj-card-w: calc(var(--kj-card-h) * 2 / 3);
	position: relative;
	height: 100svh;
	overflow: hidden;
	outline: none;
	cursor: grab;
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
}
.kj-car.is-dragging { cursor: grabbing; }
.kj-car__track { position: absolute; inset: 0; }
.kj-card {
	position: absolute;
	left: 0;
	top: 47%;
	width: var(--kj-card-w);
	height: var(--kj-card-h);
	margin: calc(var(--kj-card-h) / -2) 0 0 calc(var(--kj-card-w) / -2);
	will-change: transform;
}
.kj-card.is-active { z-index: 5; }
.kj-card__link { position: absolute; inset: 0; display: block; -webkit-user-drag: none; }
.kj-card__img { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: rgba(128, 128, 128, .12); }
.kj-card__img img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.kj-card__name {
	position: absolute;
	z-index: 2;
	left: 50%;
	top: 50%;
	width: max-content;
	max-width: 64vw;
	transform: translate(-50%, -50%);
	font-size: 7vw;
	line-height: .86;
	letter-spacing: -.04em;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	opacity: 0;
	transition: opacity .4s ease;
	pointer-events: none;
}
.kj-card__name--out { z-index: 0; color: var(--kj-ink); }
.kj-card__name--in { color: #fff; }
.kj-card__name.is-medium { font-size: 5.4vw; }
.kj-card__name.is-long { font-size: 3.9vw; white-space: normal; max-width: 46vw; }
.kj-card.is-active .kj-card__name { opacity: 1; }
.kj-car .kj-nomatch { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; font-family: var(--kj-serif); font-style: italic; font-size: 22px; }
.kj-car .kj-nomatch[hidden] { display: none; }

/* Without JavaScript the carousel is a plain horizontal strip. */
.kj-stories:not(.is-ready) .kj-car { height: auto; overflow-x: auto; cursor: auto; padding: 96px var(--kj-pad) 80px; }
.kj-stories:not(.is-ready) .kj-car__track { position: static; display: flex; gap: 24px; }
.kj-stories:not(.is-ready) .kj-card { position: relative; flex: none; margin: 0; top: auto; }
.kj-stories:not(.is-ready) .kj-card__name--in, .kj-stories:not(.is-ready) .kj-card__name--out { display: none; }

/* ---------- STORIES: index ---------- */
.kj-stories.is-index .kj-car { display: none; }
.kj-list { padding: 64px var(--kj-pad) 110px; }
.kj-list[hidden] { display: none; }
.kj-list__rows { list-style: none; margin: 0; padding: 0; }
.kj-row[hidden] { display: none; }
.kj-row__link { display: flex; justify-content: space-between; align-items: baseline; gap: 2rem; padding: 14px 0 9px; border-bottom: 1px solid var(--kj-line); }
.kj-row__name { font-size: clamp(20px, 1.55vw, 26px); letter-spacing: -.03em; text-transform: uppercase; }
.kj-row__sub { font-size: clamp(14px, 1.05vw, 17px); text-align: right; }
/* The list fades out under the bar, as on the reference. */
.kj-stories.is-index::after { content: ""; position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; height: 110px; background: linear-gradient(to bottom, transparent, var(--kj-paper) 70%); pointer-events: none; }
.kj-list .kj-nomatch { padding: 40px 0; font-family: var(--kj-serif); font-style: italic; font-size: 22px; }
.kj-float {
	position: fixed;
	z-index: 40;
	left: 0;
	top: 0;
	width: clamp(140px, 11vw, 200px);
	aspect-ratio: 2 / 3;
	pointer-events: none;
	opacity: 0;
	transition: opacity .25s ease;
	will-change: transform;
}
.kj-float.is-on { opacity: 1; }
.kj-float img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- STORIES: bar + filter ---------- */
.kj-bar {
	position: fixed;
	z-index: 48;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 18px var(--kj-pad);
	color: #fff;
	mix-blend-mode: difference;
	pointer-events: none;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: -.02em;
}
.kj-bar button { pointer-events: auto; font-weight: 600; }
.kj-bar__right { display: flex; gap: 10px; align-items: center; }
.kj-stories:not(.is-ready) .kj-bar { display: none; }

.kj-filter { position: fixed; z-index: 47; inset: 0; visibility: hidden; transition: visibility 0s linear .45s; }
.kj-filter.is-open { visibility: visible; transition: visibility 0s; }
.kj-filter__scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .46); opacity: 0; transition: opacity .45s ease; }
.kj-filter.is-open .kj-filter__scrim { opacity: 1; }
.kj-filter__panel {
	position: absolute;
	right: 10px;
	bottom: 8px;
	width: min(470px, calc(100vw - 20px));
	padding: 18px 16px 58px;
	background: var(--kj-paper);
	color: var(--kj-ink);
	font-size: 13px;
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .45s ease, transform .6s var(--kj-ease);
}
.kj-filter.is-open .kj-filter__panel { opacity: 1; transform: none; }
.kj-filter__select { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 600; padding-bottom: 18px; }
.kj-filter__select select { appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: inherit; font: 400 13px var(--kj-sans); text-align: right; padding: 2px 16px 2px 4px; cursor: pointer;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 7px) 55%, calc(100% - 3px) 55%; background-size: 4px 4px; background-repeat: no-repeat; }
.kj-filter__select select option { color: #000; }
.kj-filter__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.kj .kj-tag { padding: 5px 9px; border: 1px solid var(--kj-line); border-radius: 2px; color: var(--kj-dim); font-size: 12px; font-weight: 500; transition: color .2s, border-color .2s; }
.kj .kj-tag:hover, .kj .kj-tag.is-on { color: var(--kj-ink); border-color: var(--kj-ink); }

/* ---------- STORY ---------- */
.kj-story { position: relative; }
.kj-p { position: relative; }
.kj-hero { position: relative; }
.kj-hero__title { margin: 0; font-family: var(--kj-sans); font-weight: 400; font-size: var(--kj-title-fs, 13vw); line-height: .84; letter-spacing: -.045em; text-transform: uppercase; }
.kj-hero__line { display: block; }
.kj-hero__line:nth-child(n+2) { padding-left: .5em; }
.kj-hero__line:nth-child(2) .kj-rise > span { --kj-delay: .25s; }
.kj-hero__line:nth-child(3) .kj-rise > span { --kj-delay: .35s; }
.kj-hero__line:nth-child(4) .kj-rise > span { --kj-delay: .45s; }
.kj-hero__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 1.6em 0 0; padding-left: calc(var(--kj-title-fs, 13vw) * .5); font-size: 13px; }
.kj-hero__meta .kj-rise > span { --kj-delay: .5s; }
.kj-hero__sub { font-family: var(--kj-serif); font-style: italic; font-size: clamp(20px, 1.75vw, 27px); letter-spacing: -.02em; }
.kj-hero__intro { margin-top: 18px; padding-left: calc(var(--kj-title-fs, 13vw) * .5); opacity: 0; animation: kj-fade .9s ease .7s forwards; }
.kj-hero__intro p { margin: 0 0 .9em; }
.kj-hero__intro p:last-child { margin-bottom: 0; }
@keyframes kj-fade { to { opacity: 1; } }

.kj-cover { margin: 0; height: 100%; overflow: hidden; }
.kj-cover img { width: 100%; height: 100%; object-fit: cover; }

.kj-fig { position: relative; margin: 0; }
.kj-fig img { width: 100%; height: auto; }
.kj-fig figcaption { margin-top: 8px; font-size: 12px; line-height: 1.25; color: var(--kj-dim); max-width: 34ch; }

.kj-text__title { margin: 0 0 18px; font-family: var(--kj-serif); font-style: italic; font-weight: 400; font-size: clamp(24px, 2vw, 31px); line-height: 1.08; letter-spacing: -.02em; }
.kj-text__body p, .kj-text__body ul, .kj-text__body ol { margin: 0 0 .85em; }
.kj-text__body h3, .kj-text__body h4 { margin: 1.2em 0 .5em; font-size: 1em; font-weight: 600; letter-spacing: -.02em; }
.kj-text__body a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.kj-p--text.is-lead .kj-text__body { font-size: clamp(20px, 1.8vw, 28px); line-height: 1.16; letter-spacing: -.025em; }

.kj-quote blockquote, .kj-quote .wp-block-quote, .kj-quote .wp-block-pullquote { margin: 0; padding: 0; border: 0; }
.kj-quote p { margin: 0; font-family: var(--kj-serif); font-style: italic; font-size: clamp(28px, 3.1vw, 54px); line-height: 1.08; letter-spacing: -.02em; text-align: left; }
.kj-quote cite { display: block; margin-top: 22px; font-style: normal; font-size: 14px; font-weight: 600; letter-spacing: -.02em; }

.kj-next__head { display: block; }
.kj-next__head--in { display: none; }
.kj-next__label { display: block; margin: 0 0 6px; font-size: 17px; }
.kj-next__name { display: block; font-size: 7vw; line-height: .86; letter-spacing: -.045em; text-transform: uppercase; white-space: nowrap; }
.kj-next__name.is-medium { font-size: 5.4vw; }
.kj-next__name.is-long { font-size: 3.9vw; white-space: normal; width: 44vw; }
.kj-next__img { display: block; overflow: hidden; }
.kj-next__img img { width: 100%; height: 100%; object-fit: cover; }
.kj-next__all { display: inline-block; font-size: 14px; font-weight: 600; letter-spacing: -.02em; }

/* Buttons and the "Shop the story" panel (a group with class kj-shop inside a free panel). */
.kj .wp-block-button__link { display: inline-block; padding: 13px 22px; border: 1px solid currentColor; border-radius: 0; background: none; color: var(--kj-ink); font: 600 13px/1 var(--kj-sans); letter-spacing: .02em; text-transform: uppercase; transition: background-color .3s, color .3s; }
.kj .wp-block-button__link:hover, .kj .wp-block-button__link:focus-visible { background: var(--kj-ink); color: var(--kj-paper); }
.kj-free .kj-shop { display: grid; grid-template-columns: minmax(200px, 24vw) minmax(240px, 26vw); grid-template-rows: 1fr auto auto auto; column-gap: 3vw; align-items: end; padding: 0 !important; margin: 0; }
.kj-free .kj-shop > * { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
.kj-free .kj-shop > .wp-block-image { grid-row: 1 / span 4; margin: 0 !important; }
.kj-free .kj-shop .wp-block-image img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.kj-free .kj-shop h2 { margin: 0 0 12px !important; font-family: var(--kj-serif); font-style: italic; font-weight: 400; font-size: clamp(24px, 2vw, 31px); line-height: 1.08; letter-spacing: -.02em; }
.kj-free .kj-shop p { margin: 0 0 22px !important; max-width: 32ch; }
.kj-free .kj-shop .wp-block-buttons { margin: 0 !important; }
@media (max-width: 1023px) {
	.kj-free .kj-shop { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 0; }
	.kj-free .kj-shop > .wp-block-image { grid-row: auto; margin: 0 0 22px !important; }
}

/* Quotes on the about page. */
.kj-sec__free .wp-block-quote { margin: 0 0 6vh; padding: 0; border: 0; }
.kj-sec__free .wp-block-quote p { margin: 0; font-family: var(--kj-serif); font-style: italic; font-size: clamp(26px, 2.6vw, 44px); line-height: 1.1; letter-spacing: -.02em; }
.kj-sec__free .wp-block-quote cite { display: block; margin-top: 18px; font-style: normal; font-size: 14px; font-weight: 600; letter-spacing: -.02em; }

/* Story: stacked (phones, tablets, touch screens, no JavaScript) */
.kj-story .kj-p--hero { padding: 104px var(--kj-pad) 36px; }
.kj-story .kj-p--cover .kj-cover { aspect-ratio: 4 / 5; }
.kj-story .kj-p--text { padding: 44px var(--kj-pad); max-width: 720px; }
.kj-story .kj-p--quote { padding: 56px var(--kj-pad); }
.kj-story .kj-p--free { padding: 40px var(--kj-pad); }
html:not(.kj-hmode) .kj-story .kj-p--col { display: flex; flex-direction: column; gap: 0; padding: 36px var(--kj-pad); }
html:not(.kj-hmode) .kj-story .kj-p--col .kj-fig { width: 72%; }
html:not(.kj-hmode) .kj-story .kj-p--col .kj-fig:nth-child(2) { width: 86%; align-self: flex-end; margin-top: 26px; }
html:not(.kj-hmode) .kj-story .kj-p--col .kj-fig:nth-child(3) { width: 62%; margin-top: -9vw; z-index: 2; }
html:not(.kj-hmode) .kj-story .kj-col--c .kj-fig { width: 100%; }
html:not(.kj-hmode) .kj-story .kj-p--next { padding: 64px var(--kj-pad) 40px; }
html:not(.kj-hmode) .kj-story .kj-next__img { display: block; margin: 18px calc(var(--kj-pad) * -1) 22px; aspect-ratio: 4 / 5; }
html:not(.kj-hmode) .kj-story .kj-next__head--in { display: none; }
html:not(.kj-hmode) .kj-story .kj-next__name { font-size: 13vw; white-space: normal; }
html:not(.kj-hmode) .kj-story .kj-next__name.is-long { font-size: 9vw; width: auto; }
.kj-story .kj-p--end { padding: 60px var(--kj-pad); }

/* Story: sideways (desktop with mouse or trackpad; class set by journal.js) */
html.kj-hmode .kj-h__pin { position: sticky; top: var(--kj-top); height: calc(100svh - var(--kj-top)); overflow: hidden; }
html.kj-hmode .kj-h__track { display: flex; height: 100%; width: max-content; will-change: transform; }
html.kj-hmode .kj-p { flex: none; height: 100%; max-width: none; }
html.kj-hmode .kj-story .kj-p--hero { width: 60vw; display: flex; align-items: center; padding: 64px 4vw 40px 3.4vw; }
html.kj-hmode .kj-hero__intro { columns: 2; column-gap: 32px; max-width: 640px; }
html.kj-hmode .kj-story .kj-p--cover { width: 40vw; padding: 0; }
html.kj-hmode .kj-story .kj-p--cover .kj-cover { aspect-ratio: auto; height: 100%; }
html.kj-hmode .kj-story .kj-p--text { display: flex; align-items: center; padding: 0 5.5vw; }
html.kj-hmode .kj-p--text .kj-text__body { height: 54vh; column-width: 20rem; column-gap: 2.6rem; column-fill: auto; width: 20rem; }
html.kj-hmode .kj-p--text.is-lead .kj-text__body { height: auto; columns: auto; width: 27vw; min-width: 330px; }
html.kj-hmode .kj-story .kj-p--quote { width: 58vw; display: flex; align-items: center; padding: 0 6vw; }
html.kj-hmode .kj-story .kj-p--free { width: 72vw; display: flex; align-items: center; padding: 12vh 5vw; overflow-y: auto; }
html.kj-hmode .kj-p--free .kj-free { width: 100%; }
html.kj-hmode .kj-story .kj-p--end { width: 40vw; display: flex; align-items: center; justify-content: center; }

html.kj-hmode .kj-story .kj-p--col { display: flex; flex-direction: row; align-items: flex-start; padding: 0 6vw; }
html.kj-hmode .kj-p--col .kj-fig { flex: none; }
html.kj-hmode .kj-p--col .kj-fig img { height: 100%; width: auto; }
/* a: small, large, medium overlapping */
html.kj-hmode .kj-col--a .kj-fig--1 { height: 40vh; margin-top: 30vh; margin-right: 7vw; }
html.kj-hmode .kj-col--a .kj-fig--2 { height: 84vh; margin-top: 8vh; }
html.kj-hmode .kj-col--a .kj-fig--3 { height: 60vh; margin-top: 30vh; margin-left: -9vw; z-index: 2; }
/* g: tall + two stacked */
html.kj-hmode .kj-story .kj-col--g { display: grid; grid-template-rows: 38vh 38vh; grid-auto-flow: column; gap: 3vh 3vw; align-content: center; }
html.kj-hmode .kj-col--g .kj-fig--1 { grid-row: 1 / span 2; height: calc(76vh + 3vh); }
html.kj-hmode .kj-col--g .kj-fig--2, html.kj-hmode .kj-col--g .kj-fig--3 { height: 38vh; }
/* b: overlapping pair */
html.kj-hmode .kj-col--b .kj-fig--1 { height: 66vh; margin-top: 9vh; }
html.kj-hmode .kj-col--b .kj-fig--2 { height: 50vh; margin-top: 36vh; margin-left: -8vw; z-index: 2; }
/* c: single */
html.kj-hmode .kj-col--c .kj-fig--1 { height: 82vh; margin-top: 9vh; }
html.kj-hmode .kj-p--col .kj-fig figcaption { position: absolute; top: 100%; left: 0; }

/* Next story: the photo fills the last 40vw; the title block ends at 70vw, so its last letters
   always run onto the photo, where the white copy inside the photo (same right: 30vw) takes over. */
html.kj-hmode .kj-story .kj-p--next { width: 100vw; padding: 0; }
html.kj-hmode .kj-next { position: relative; height: 100%; }
html.kj-hmode .kj-next__head { position: absolute; right: 30vw; top: 50%; transform: translateY(-50%); }
html.kj-hmode .kj-next__img { position: absolute; left: 60vw; top: 0; width: 40vw; height: 100%; }
html.kj-hmode .kj-next__head--in { display: block; color: #fff; pointer-events: none; }
html.kj-hmode .kj-next__head--in .kj-next__label { visibility: hidden; }
html.kj-hmode .kj-next__all { position: absolute; left: 20vw; bottom: 7vh; }

/* ---------- ABOUT ---------- */
html:has(body.kj-view-about) { scroll-behavior: smooth; }
.kj-about { padding-top: 120px; }
.kj-about__hero { padding: 0 var(--kj-pad) 40px; }
.kj-about__title { display: flex; flex-direction: column; align-items: center; margin: 0; font-weight: 400; font-size: clamp(46px, 8.6vw, 150px); line-height: .84; letter-spacing: -.045em; text-align: center; text-transform: uppercase; }
.kj-about__line:nth-child(2) .kj-rise > span { --kj-delay: .22s; }
.kj-about__line:nth-child(3) .kj-rise > span { --kj-delay: .29s; }
.kj-about__line:nth-child(4) .kj-rise > span { --kj-delay: .36s; }
.kj-about__img { display: block; width: min(36vw, 520px); margin: 3vw auto; overflow: hidden; }
.kj-about__img img { width: 100%; height: auto; }
.kj-about__intro { max-width: 760px; margin: 48px auto 0; font-size: clamp(19px, 1.6vw, 25px); line-height: 1.18; letter-spacing: -.02em; text-align: center; }
.kj-about__nav { position: sticky; z-index: 30; top: var(--kj-top); padding: 20px var(--kj-pad) 26px; pointer-events: none; }
.kj-about__nav ul { display: flex; justify-content: center; gap: 18px; margin: 0; padding: 0; list-style: none; font-size: 13px; font-weight: 600; letter-spacing: -.02em; }
.kj-about__nav a { pointer-events: auto; mix-blend-mode: difference; color: #fff; opacity: .55; transition: opacity .2s; }
.kj-about__nav a.is-current, .kj-about__nav a:hover { opacity: 1; }
.kj-about__nav ul { mix-blend-mode: difference; }
.kj-sec { display: grid; grid-template-columns: 1fr 2fr; gap: 0 3vw; margin: 0 var(--kj-pad); padding: 26px 0 110px; border-top: 1px solid var(--kj-line); scroll-margin-top: 40px; }
.kj-sec__num { display: block; font-size: clamp(54px, 6.2vw, 100px); line-height: .9; letter-spacing: -.05em; }
.kj-sec__title { margin: 12px 0 0; font-family: var(--kj-serif); font-style: italic; font-weight: 400; font-size: clamp(20px, 1.6vw, 25px); letter-spacing: -.02em; }
.kj-sec__body { padding-top: 14vh; }
.kj-sec__lead { font-size: clamp(20px, 1.8vw, 28px); line-height: 1.16; letter-spacing: -.025em; }
.kj-sec__lead p { margin: 0 0 1.2em; text-indent: 2.4em; }
.kj-sec__cols { columns: 2; column-gap: 2.6vw; font-size: 15px; line-height: 1.28; margin: 0 0 4vh; }
.kj-sec__cols p { margin: 0 0 .9em; text-indent: 2.4em; }
.kj-sec__cols h3 { margin: 0 0 .4em; font-size: 15px; font-weight: 600; }
.kj-sec__figure { margin: 0 0 5vh; }
.kj-sec__figure figure, .kj-sec__gallery figure { margin: 0; }
.kj-sec__figure img, .kj-sec__gallery img { width: 100%; height: auto; }
.kj-sec__gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 2vw; margin: 0 0 5vh; }
.kj-sec figcaption { margin-top: 8px; font-size: 12px; line-height: 1.25; color: var(--kj-dim); }
.kj-sec__free { margin: 0 0 5vh; }

/* ---------- phones ---------- */
@media (max-width: 680px) {
	.kj-head { padding: 18px var(--kj-pad); font-size: 13px; }
	.kj-menu { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; padding-top: 66px; }
	.kj-menu__link { font-size: 40px; }
	.kj-menu__sub { grid-row: 3; }
	.kj-menu__mark { grid-column: 1; grid-row: 2; align-self: end; font-size: 21vw; margin-bottom: 18px; }
	.kj-car { --kj-card-h: 50svh; }
	.kj-card__name { font-size: 12vw; max-width: 92vw; }
	.kj-card__name.is-medium { font-size: 9vw; }
	.kj-card__name.is-long { font-size: 7vw; max-width: 84vw; }
	.kj-bar { font-size: 15px; }
	.kj-row__link { flex-direction: column; gap: 2px; }
	.kj-row__sub { text-align: left; }
	.kj-sec { grid-template-columns: 1fr; padding-bottom: 70px; }
	.kj-sec__body { padding-top: 28px; }
	.kj-sec__cols { columns: 1; }
	.kj-about__img { width: 70vw; }
}

@media (prefers-reduced-motion: reduce) {
	.kj-rise > span, .kj-hero__intro { animation: none; transform: none; opacity: 1; }
	.kj-swap > span, .kj-menu, .kj-menu__mark, .kj-filter__panel, .kj-veil, .kj-slide { transition: none; }
	html:has(body.kj-view-about) { scroll-behavior: auto; }
}

/* Turkish capitals carry dots and circumflexes (İ, Â): a little more room between display lines. */
html[lang^="tr"] .kj-about__title, html[lang^="tr"] .kj-hero__title { line-height: .93; }