/* ---------------------------------------------------------------------------
 * Kristoffer Canimo 2026 — shell, header, footer, and the shortcode-shim grid.
 * ------------------------------------------------------------------------ */

.kc-shell {
	width: min(100% - (var(--gutter) * 2), var(--shell));
	margin-inline: auto;
}

.kc-main { display: block; min-height: 50vh; }

/* ---------------------------------------------------------------------------
 * The brand face: header, navigation, footer. Always set in caps.
 *
 * Maheni is a display face and its lowercase counters close up below about
 * 16px — which is exactly the size the header and footer links run at. Caps
 * have no such counters, so setting the whole navigation layer uppercase is
 * what makes the face usable at these sizes, not only a stylistic choice.
 *
 * Tracking is deliberately restrained. Caps normally want air, but Maheni is
 * already a wide face, so the usual .1em treatment pulls the words apart.
 * .03em on the small links, none at all on the big overlay ones.
 * ------------------------------------------------------------------------ */

.kc-header,
.kc-menu {
	font-family: var(--font-brand);
}

.kc-utility,
.kc-nav__list a,
.kc-nav .menu-item a {
	text-transform: uppercase;
	letter-spacing: .03em;
}

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

.kc-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in oklab, var(--bg) 82%, transparent);
	backdrop-filter: saturate(160%) blur(20px);
	-webkit-backdrop-filter: saturate(160%) blur(20px);
	border-bottom: 1px solid transparent;
	transition:
		border-color var(--speed) var(--ease),
		background var(--speed) var(--ease),
		transform 320ms var(--ease);
}

/* Out of the way on the way down, back on the way up. The home page's header
   is absolute and scrolls off on its own, so it is left alone. */
body:not(.home) .kc-header[data-hidden="true"] { transform: translateY(-100%); }
body.kc-menu-open .kc-header { transform: none; }

@media (prefers-reduced-motion: reduce) {
	.kc-header { transition: none; }
}

.kc-header[data-scrolled="true"] {
	border-bottom-color: var(--rule);
	background: color-mix(in oklab, var(--bg) 92%, transparent);
}

@media (prefers-reduced-transparency: reduce) {
	.kc-header { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* The header runs the full width of the viewport and is held off the edge by
   the page gutter — the same gutter the hero titles and the arrow use, and the
   same one a full-bleed photograph stops at. Capping it at --shell-wide pulled
   the burger and Contact inwards on anything above ~1744px while the titles
   underneath stayed at the gutter, so the two never lined up on a large
   display. Chrome belongs to the viewport edge; only reading measures are
   capped. */
.kc-header__inner {
	width: 100%;
	padding-left: calc(var(--gutter) + env(safe-area-inset-left));
	padding-right: calc(var(--gutter) + env(safe-area-inset-right));
	/* Equal padding above and below, so the logo sits in the middle of the
	   bar. A min-height with top-only padding left twice the space above. */
	padding-top: calc(var(--sp-5) + env(safe-area-inset-top));
	padding-bottom: var(--sp-5);
	display: grid;
	/* Lockup on the left, burger on the right, nothing in between. */
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: var(--sp-4);
}

/* Flex, not plain blocks: an inline-level child sits on a line box and picks
   up the font's descender space below it, which pushed the burger and Contact
   about 6px below the logo's centre. */
.kc-header__left,
.kc-header__right {
	display: flex;
	align-items: center;
}

.kc-header__left  { justify-self: start; }
.kc-header__right { justify-self: end; }

.kc-brand {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}

.kc-brand__logo {
	width: auto;
	/* A stacked two-line lockup, so it needs more height than a wordmark
	   before the second line becomes readable. */
	height: clamp(1.875rem, 3vw, 2.625rem);
}

/* Ink by default, on the white page. The hero swaps to paper in hero.css, and
   swaps back the moment the menu overlay covers it. See kc_brand(). */
.kc-brand__logo--paper { display: none; }

.custom-logo-link { display: inline-flex; }
.custom-logo { max-height: 1.75rem; width: auto; }

/* --- nav ------------------------------------------------------------- */

.kc-nav__list {
	font-family: var(--font-brand);
	display: flex;
	align-items: center;
	gap: clamp(var(--sp-4), 2.2vw, var(--sp-6));
	margin: 0; padding: 0;
	list-style: none;
	font-size: var(--step--1);
}

.kc-nav__list a,
.kc-nav .menu-item a {
	text-decoration: none;
	color: var(--ink-soft);
	padding-block: var(--sp-2);
	display: inline-block;
}

.kc-nav__list a:hover,
.kc-nav .menu-item a:hover { color: var(--ink); }

.kc-nav .current-menu-item > a { color: var(--ink); }

/* --- page furniture -------------------------------------------------- */

.kc-pagehead { padding-block: var(--sp-8) var(--sp-6); }
.kc-pagehead__title { margin: 0; }

/* A centred, deliberately small masthead: the photographs are the headline,
   not the type. */
.kc-storyhead {
	width: min(100% - (var(--gutter) * 2), 52rem);
	margin-inline: auto;
	padding-block: clamp(4rem, 10vw, 8rem) clamp(2.5rem, 6vw, 5rem);
	text-align: center;
}

.kc-storyhead__eyebrow {
	font-family: var(--font-display);
	margin: 0 0 var(--sp-4);
	font-size: var(--step--2);
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--ink-faint);
}

.kc-storyhead__title {
	margin: 0;
	/* 72px on desktop, still fluid below so it cannot overflow a phone. */
	font-size: clamp(2.25rem, 5.4vw, 72px);
	line-height: 1.04;
	letter-spacing: -.03em;
}

.kc-storyhead__standfirst {
	margin: var(--sp-5) auto 0;
	max-width: 34rem;
	color: var(--ink-soft);
	text-wrap: pretty;
}

.kc-dot { margin-inline: .4em; }

.kc-content { padding-bottom: var(--sp-8); }

.kc-prose { max-width: var(--shell-narrow); }
.kc-prose :where(h2, h3) { margin-top: var(--sp-6); }

.kc-notfound { padding-block: var(--sp-9); }
.kc-empty { padding-block: var(--sp-9); color: var(--ink-faint); }

/* --- shim grid ------------------------------------------------------- */

.kc-row {
	padding-block: var(--sp-7);
}

.kc-row + .kc-row { padding-top: 0; }

/* A named row is a real section of the document and earns a rule above it. */
.kc-content--front .kc-row[id] {
	padding-top: var(--sp-9);
	border-top: 1px solid var(--rule);
	margin-top: var(--sp-8);
}
.kc-content--front .kc-row[id]:first-child { border-top: 0; margin-top: 0; }

.kc-row__inner {
	width: min(100% - (var(--gutter) * 2), var(--shell));
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--sp-5) var(--sp-6);
	align-items: start;
}

/* A row nested inside a column should not re-pad or re-constrain. */
.kc-col .kc-row { padding-block: 0; }
.kc-col .kc-row__inner { width: 100%; }

.kc-col { grid-column: span 12; min-width: 0; }
.kc-col--center { text-align: center; }

@media (min-width: 781px) {
	.kc-col--1  { grid-column: span 1; }
	.kc-col--2  { grid-column: span 2; }
	.kc-col--3  { grid-column: span 3; }
	.kc-col--4  { grid-column: span 4; }
	.kc-col--5  { grid-column: span 5; }
	.kc-col--6  { grid-column: span 6; }
	.kc-col--7  { grid-column: span 7; }
	.kc-col--8  { grid-column: span 8; }
	.kc-col--9  { grid-column: span 9; }
	.kc-col--10 { grid-column: span 10; }
	.kc-col--11 { grid-column: span 11; }
}

.kc-space { height: var(--sp-4); }
.kc-space--0, .kc-space--1 { height: var(--sp-3); }
.kc-space--2 { height: var(--sp-5); }
.kc-space--3 { height: var(--sp-6); }
.kc-space--4 { height: var(--sp-7); }
.kc-space--5, .kc-space--6, .kc-space--7, .kc-space--8 { height: var(--sp-8); }

.kc-rule { margin-block: var(--sp-6); }

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

/* Black and white, four columns in Univers, mixed case, and the name
   set huge across the bottom edge, gutter to gutter. */
.kc-footer {
	margin-top: var(--sp-9);
	padding-top: var(--sp-8);
	overflow: hidden;
	background: #000;
	color: #fff;
	font-family: var(--font-text);
	font-size: .875rem; /* 14px */
	line-height: 1.6;
	font-weight: 400;
}

.kc-footer__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sp-6);
	padding-left: calc(var(--gutter) + env(safe-area-inset-left));
	padding-right: calc(var(--gutter) + env(safe-area-inset-right));
}

@media (max-width: 899px) {
	.kc-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-7); }
}

@media (max-width: 519px) {
	.kc-footer__grid { grid-template-columns: minmax(0, 1fr); }
}

.kc-footer__title {
	margin: 0;
	font-family: var(--font-text);
	font-size: inherit;
	font-weight: 700;
	line-height: inherit;
	letter-spacing: .01em;
	color: #fff;
}

.kc-footer__text,
.kc-footer__list {
	margin: 0;
	color: rgb(255 255 255 / .62);
	letter-spacing: .01em;
}

/* One blank line, as in the reference, between a column's two thoughts. */
.kc-footer__gap { margin-top: 1.6em; text-wrap: balance; }

.kc-footer__list {
	list-style: none;
	padding: 0;
}

.kc-footer a {
	color: inherit;
	text-decoration: none;
	transition: color var(--speed) var(--ease);
}
.kc-footer a:hover,
.kc-footer a:focus-visible { color: #fff; }
.kc-footer a:focus-visible { outline: none; box-shadow: none; text-decoration: underline; text-underline-offset: .2em; }

.kc-footer__cite { color: rgb(255 255 255 / .42); white-space: nowrap; }

/* "KRISTOFFER CANIMO" in Maheni is 9.18em of ink, starting .075em in from
   its box, so dividing the gutter-to-gutter width by that and pulling the box
   left by the side bearing puts the K and the o exactly on the gutters.

   Only the top 80% of the letters shows; the rest is buried under the bottom
   edge. At line-height 1 the letters' tops sit .13em below the line box and
   they stand .71em tall, so a box .13 + .71 x .8 = .698em high, clipped, cuts
   them at 80%. */
.kc-footer__mark {
	height: .698em;
	margin: var(--sp-8) 0 0;
	overflow: hidden;
	padding-left: calc(var(--gutter) + env(safe-area-inset-left));
	font-family: var(--font-brand);
	font-weight: 400;
	font-size: calc((100vw - var(--gutter) * 2) / 9.18);
	text-indent: -.075em;
	line-height: 1;
	letter-spacing: 0;
	text-transform: uppercase;
	white-space: nowrap;
	color: #fff;
	user-select: none;
}

/* ---------------------------------------------------------------------------
 * Front page — photography first.
 * ------------------------------------------------------------------------ */

.kc-masthead {
	padding-block: var(--sp-10) var(--sp-9);
}

.kc-masthead__inner {
	width: min(100% - (var(--gutter) * 2), var(--shell));
	margin-inline: auto;
	display: grid;
	gap: var(--sp-6);
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

@media (min-width: 900px) {
	.kc-masthead__inner {
		grid-template-columns: 7.5rem minmax(0, 1fr);
		gap: var(--sp-7);
	}
}

.kc-masthead__portrait img {
	width: 7.5rem;
	height: 7.5rem;
	border-radius: 50%;
	object-fit: cover;
	filter: grayscale(1) contrast(1.02);
}

.kc-masthead__statement {
	margin: 0;
	font-size: var(--step-4);
	line-height: 1.1;
	max-width: 22ch;
	text-wrap: pretty;
}

.kc-masthead__statement a {
	text-decoration-color: var(--rule-strong);
}

/* --- lead: the trips --------------------------------------------------- */

.kc-lead {
	width: min(100% - (var(--gutter) * 2), var(--shell-wide));
	margin-inline: auto;
	padding-bottom: var(--sp-9);
}

.kc-lead__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-4);
	padding-bottom: var(--sp-4);
	border-bottom: 1px solid var(--rule);
	margin-bottom: var(--sp-7);
}
.kc-lead__head .kc-eyebrow { margin: 0; }

.kc-morelink {
	font-size: var(--step--1);
	text-decoration: none;
	color: var(--ink-soft);
	white-space: nowrap;
}
.kc-morelink:hover { color: var(--ink); }

.kc-lead__feature { margin-bottom: var(--sp-8); }

.kc-lead__feature .kc-trip__frame { aspect-ratio: 16 / 9; }
.kc-lead__feature .kc-trip__title { font-size: var(--step-3); }

.kc-lead__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
	gap: var(--sp-8) var(--sp-6);
}

.kc-lead__foot { margin-top: var(--sp-8); text-align: center; }

/* --- clients ----------------------------------------------------------- */

.kc-clients {
	background: var(--bg-inverse);
	color: var(--ink-inverse);
	padding-block: var(--sp-8);
}

.kc-clients__inner {
	width: min(100% - (var(--gutter) * 2), var(--shell));
	margin-inline: auto;
}

.kc-clients .kc-eyebrow {
	color: color-mix(in oklab, currentColor 55%, transparent);
	margin-bottom: var(--sp-6);
}

.kc-clients__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
	gap: var(--sp-7) var(--sp-6);
	align-items: center;
}

.kc-clients__img {
	width: auto;
	max-width: 100%;
	max-height: 2.25rem;
	margin-inline: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .82;
	transition: opacity var(--speed) var(--ease);
}
.kc-clients__item:hover .kc-clients__img { opacity: 1; }

/* --- the rest of the page ---------------------------------------------- */

.kc-content--front { padding-top: var(--sp-8); }

/* ---------------------------------------------------------------------------
 * Burger, utility link and the menu overlay.
 * ------------------------------------------------------------------------ */

.kc-burger {
	display: inline-flex;
	align-items: center;
	padding: var(--sp-2) 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

/* The two rules must sit a WHOLE number of pixels apart, top to top.

   They were 1.25px thick with a 5px gap — 6.25px apart. The browser snaps each
   rule to whole device pixels, and a .25 offset between them meant the pair
   never landed on the same fraction of a pixel: one rounded up to two rows of
   ink and the other down to one, so one line looked twice as heavy as the
   other. Which one depended on where the header's centring happened to put
   them, which is why it was the second rule on a post cover and the first on
   the index.

   1.5 + 4.5 = 6px apart: the same phase at every pixel density, so both rules
   always round identically. 1.5px is also exactly 3 device pixels on a retina
   screen, so there they are crisp as well as equal. */
.kc-burger__box {
	display: grid;
	gap: 4.5px;
	width: 1.75rem;
}

.kc-burger__bar {
	display: block;
	height: 1.5px;
	background: currentColor;
	transition: transform var(--speed) var(--ease), opacity var(--speed) var(--ease);
}

/* Open state folds the two rules into a cross: each moves half the 6px
   between them so they meet in the middle. */
[aria-expanded="true"] .kc-burger__bar:first-child { transform: translateY(3px) rotate(45deg); }
[aria-expanded="true"] .kc-burger__bar:last-child  { transform: translateY(-3px) rotate(-45deg); }

.kc-burger:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.kc-utility {
	font-size: var(--step--1);
	text-decoration: none;
	color: var(--ink-soft);
}
.kc-utility:hover { color: var(--ink); }

/* --- menu panel ------------------------------------------------------- */

/* A glass band across the top of the screen that draws down like a blind and
   folds back up on close. No dimming behind it; the backdrop is only there to
   catch a click outside. */
.kc-menu {
	position: fixed;
	inset: 0;
	z-index: 60;
}

.kc-menu[hidden] { display: none; }

.kc-menu__backdrop {
	position: absolute;
	inset: 0;
}

.kc-menu__panel {
	--kc-menu-pad: clamp(1.25rem, 3vw, 2.25rem);
	--kc-by: 2.75rem; /* burger's centre line, measured by site.js */
	/* A band across the top of the screen, edge to edge, as tall as the links
	   need. The side padding is the page gutter, so the links end under the
	   burger. */
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	max-height: 100%;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0 calc(var(--gutter) + env(safe-area-inset-right)) var(--kc-menu-pad) calc(var(--gutter) + env(safe-area-inset-left));
	color: #fff;
	/* Smoked glass, not milky: white type has to hold on the white pages too,
	   and it is still thin enough to see the photograph moving behind it. */
	background: rgb(19 18 16 / .4);
	-webkit-backdrop-filter: blur(8px) saturate(160%);
	backdrop-filter: blur(8px) saturate(160%);
	/* Closed, the clip is folded up against the top edge; opening draws its
	   bottom edge down the screen like a blind. */
	clip-path: inset(0 0 100% 0);
	transition: clip-path 620ms cubic-bezier(.32, .72, 0, 1);
}

.kc-menu.is-open .kc-menu__panel {
	clip-path: inset(0 0 0 0);
}

/* A clip also cuts off anything drawn outside it, so the drop shadow can only
   arrive once the card has finished growing and the clip is let go. Without
   it a white card over the white header has no edge. */
.kc-menu.is-settled .kc-menu__panel {
	clip-path: none;
	box-shadow: 0 12px 40px rgb(0 0 0 / .12);
	transition: box-shadow 260ms var(--ease);
}

/* Closing runs a touch quicker than opening. */
.kc-menu:not(.is-open) .kc-menu__panel {
	transition: clip-path 420ms cubic-bezier(.4, 0, .2, 1);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.kc-menu__panel { background: color-mix(in oklab, var(--bg) 94%, transparent); }
}

@media (prefers-reduced-transparency: reduce) {
	.kc-menu__panel { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* Contents settle in just behind the clip. */
.kc-menu__top,
.kc-menu .kc-nav__item,
.kc-menu .menu-item {
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 200ms var(--ease), transform 200ms var(--ease);
}
.kc-menu.is-open .kc-menu__top,
.kc-menu.is-open .kc-nav__item,
.kc-menu.is-open .menu-item {
	opacity: 1;
	transform: none;
	transition: opacity 420ms var(--ease), transform 520ms cubic-bezier(.32, .72, 0, 1);
}
.kc-menu.is-open .kc-menu__top { transition-delay: 140ms; }
.kc-menu.is-open li:nth-child(1) { transition-delay: 180ms; }
.kc-menu.is-open li:nth-child(2) { transition-delay: 220ms; }
.kc-menu.is-open li:nth-child(3) { transition-delay: 260ms; }
.kc-menu.is-open li:nth-child(4) { transition-delay: 300ms; }
.kc-menu.is-open li:nth-child(n+5) { transition-delay: 340ms; }

@media (prefers-reduced-motion: reduce) {
	.kc-menu__panel,
	.kc-menu:not(.is-open) .kc-menu__panel { clip-path: inset(0 0 0 0); transition: opacity 160ms linear; }
	.kc-menu:not(.is-open) .kc-menu__panel { opacity: 0; }
	.kc-menu__top, .kc-menu .kc-nav__item, .kc-menu .menu-item { transform: none; }
}

/* While the menu is open the header rides above the panel, see-through: the
   lockup stays put in the middle, and the burger folds into the X that
   closes it. The panel only leaves room at the top for that row. */
body.kc-menu-open .kc-header,
body.kc-menu-open .kc-header[data-scrolled="true"] {
	z-index: 70;
	background: transparent;
	border-bottom-color: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* The top row is just room for the header's row. */
.kc-menu__top {
	height: calc(var(--kc-by) * 2);
}


/* Same size, line and rows as the front page's titles, but flush right on
   the gutter under the burger, in white. */
.kc-menu .kc-nav__list {
	display: grid;
	gap: 0;
	justify-items: end;
	text-align: right;
	list-style: none;
	margin: 0;
	padding: 0;
}

.kc-menu .kc-nav__list a,
.kc-menu .menu-item a {
	position: relative;
	display: inline-flex;
	padding: 0;
	font-family: var(--font-brand);
	font-weight: 400;
	font-size: var(--kc-hero-size);
	line-height: 1.02;
	letter-spacing: 0;
	color: #fff;
	text-shadow: 0 2px 12px rgb(0 0 0 / .25);
	text-decoration: none;
	white-space: nowrap;
	opacity: 1;
	transition: opacity var(--speed) var(--ease);
}

/* The hero's hover, mirrored for a right-hand column: the word steps left and
   the arrow slides into the space it left; the other words fade back. */
.kc-menu__go { display: none; }

@media (hover: hover) and (pointer: fine) {
	.kc-menu__label { transition: transform 380ms var(--ease); }

	.kc-menu__go {
		display: block;
		position: absolute;
		right: 0;
		top: 50%;
		width: var(--kc-arrow);
		height: auto;
		opacity: 0;
		transform: translate(calc(var(--kc-hero-size) * .2), -50%);
		transition: opacity 240ms var(--ease), transform 380ms var(--ease);
		filter: drop-shadow(0 1px 4px rgb(0 0 0 / .35));
		pointer-events: none;
	}

	.kc-menu .kc-nav__list a:hover .kc-menu__go,
	.kc-menu .kc-nav__list a:focus-visible .kc-menu__go { opacity: 1; transform: translate(0, -50%); }
	.kc-menu .kc-nav__list a:hover .kc-menu__label,
	.kc-menu .kc-nav__list a:focus-visible .kc-menu__label { transform: translateX(calc(var(--kc-hero-size) * -.72)); }

	.kc-menu .kc-nav__list:hover a { opacity: .42; }
	.kc-menu .kc-nav__list a:hover { opacity: 1; }
}

.kc-menu .kc-nav__list a:focus-visible { outline: none; box-shadow: none; }

/* Over the smoked glass the header turns to paper on every page. */
body.kc-menu-open .kc-header .kc-brand,
body.kc-menu-open .kc-header .kc-burger { color: #fff; }
body.kc-menu-open .kc-header .kc-brand__logo--ink { display: none; }
body.kc-menu-open .kc-header .kc-brand__logo--paper { display: block; }

body.kc-menu-open { overflow: hidden; }


/* ---------------------------------------------------------------------------
 * A story's header gets out of the way: thinner, and completely transparent so
 * the photographs run under it.
 * ------------------------------------------------------------------------ */

.single .kc-header,
.single .kc-header[data-scrolled="true"] {
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-bottom-color: transparent;
}

/* Same header height and lockup size as every other page; only the ground
   changes. */