/* ---------------------------------------------------------------------------
 * Kristoffer Canimo 2026 — the front page hero.
 *
 * One cinematic frame, the trips listed over it. The frame is always dark, so
 * this section is white-on-image in both light and dark appearance.
 * ------------------------------------------------------------------------ */

.kc-hero {
	/* The title size, and everything that has to agree with it: the hover
	   arrow beside a title and the pager arrow are the same glyph at the same
	   size, so both are derived from this one value. */
	position: relative;
	width: 100%;
	/* lvh, not dvh or svh: the LARGE viewport is the tallest the screen can
	   ever be, so the frame can never come up short and let the footer show
	   underneath, whatever iOS is doing with its bars. Legacy 100vh already
	   behaves as lvh on iOS, which makes it the right fallback. */
	min-height: 100vh;
	min-height: 100lvh;
	display: grid;
	grid-template-rows: 1fr auto;
	overflow: clip;
	background: #0b0a09;
	color: #fff;
	isolation: isolate;
}

/* --- the frame --------------------------------------------------------- */

.kc-hero__stage {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.kc-hero__layer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	filter: blur(0);
	transform: scale(1);
	/* Only opacity transitions. The blur is a keyframe animation because a
	   transition cannot hold a value part-way — and the hold is the point. */
	transition: opacity 600ms var(--ease-frame);
	will-change: opacity, filter, transform;
}

 /* The incoming frame must sit above the one it replaces, whichever of the
    two layers it happens to be this time. */
.kc-hero__layer.is-active { opacity: 1; z-index: 1; }

/* The incoming frame lands heavily out of focus, sits there while it reads as
   deliberate, then pulls sharp. The scale hides the transparent edge that a
   blur filter leaves at the frame's boundary. */
@keyframes kc-frame-in {
	0%, 28% {
		filter: blur(52px);
		transform: scale(1.11);
	}
	100% {
		filter: blur(0);
		transform: scale(1);
	}
}

.kc-hero__layer.is-entering {
	animation: kc-frame-in 1800ms cubic-bezier(.24, 0, .16, 1) both;
}

/* The same reveal, at the speed of the hand, for anything the reader caused.

   Measured before this existed: hovering a title, the image swap began within
   1ms (it was already preloaded) and then took 1,898ms to come sharp, while
   the title, arrow and location finished moving at 380ms. The photograph
   trailed the gesture by a second and a half, and it read as the page being
   slow. The long held blur was designed for the slideshow drifting on its own,
   where there is nothing to keep pace with.

   No hold, a lighter blur, and the same --ease as the title's own transform,
   which covers most of its distance early — so the frame is visually sharp as
   the title settles. */
@keyframes kc-frame-in-quick {
	0% {
		filter: blur(22px);
		transform: scale(1.045);
	}
	100% {
		filter: blur(0);
		transform: scale(1);
	}
}

.kc-hero__layer.is-entering.is-quick {
	animation: kc-frame-in-quick 460ms var(--ease) both;
}

.kc-hero__layer.is-quick { transition-duration: 380ms; }

@media (prefers-reduced-motion: reduce) {
	.kc-hero__layer { transition: opacity 1ms; }
	.kc-hero__layer.is-entering { animation: none; }
}

/* No scrim. There used to be one — a gradient darkening the bottom 60% of the
   frame across its full width, up to 72% black — and Kris removed it: the
   photograph is shown as shot. Legibility is carried by the shadows on the
   type and the arrow alone. */
.kc-hero__scrim { display: none; }

/* --- the list ---------------------------------------------------------- */

.kc-hero__body {
	grid-row: 2;
	align-self: end;
	/* Left on the gutter, like the header. The last title's digits stop 2.5rem
	   above the bottom edge (a line box carries .182em of empty space under
	   Clash's figures at line-height 1.02, so that much is taken back). The
	   page is viewport-fit=cover, so the insets keep it off the home
	   indicator. */
	--kc-hero-foot: calc(2.5rem - var(--kc-hero-size) * .182);
	padding: var(--gutter);
	padding-left: calc(var(--gutter) + env(safe-area-inset-left));
	padding-right: calc(var(--gutter) + env(safe-area-inset-right));
	padding-bottom: calc(var(--kc-hero-foot) + env(safe-area-inset-bottom));
	width: 100%;
}

/* The hero is a full large-viewport tall, so while Safari's bars are showing,
   its last (100lvh - 100svh) is below the fold — exactly the height of those
   bars. Adding that to the padding lifts the titles back into view without
   ever letting the frame fall short. Resolves to zero everywhere else. */
@supports (height: 100lvh) and (height: 100svh) {
	.kc-hero__body {
		padding-bottom: calc(var(--kc-hero-foot) + env(safe-area-inset-bottom) + (100lvh - 100svh));
	}
}

/* The pager shares the row with the titles rather than being positioned
   against the section, so it can never land outside the padded area. */
.kc-hero__row {
	display: flex;
	align-items: flex-end;
	gap: var(--sp-5);
	width: 100%;
}

.kc-hero__lists { min-width: 0; max-width: 68rem; }

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

.kc-hero__item { margin: 0; }

.kc-hero__link {
	display: inline-flex;
	align-items: flex-start;
	text-decoration: none;
	color: #fff;
	transition: opacity var(--speed) var(--ease);
}

.kc-hero__title {
	font-family: var(--font-hero);
	/* 74px on desktop; still fluid below so long titles cannot overflow a
	   phone, since they are set nowrap. */
	font-size: var(--kc-hero-size);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -.012em;
	text-wrap: nowrap;
}

/* --- the arrow that says "this opens" ---------------------------------- */

/* Hover a title and it steps right, an arrow appearing in the space it left.

   Done with transforms, not by giving the arrow width. Reserving its space
   would indent every title all the time and pull the list off the gutter
   the pager and the header share; a transform moves only the hovered title,
   costs no layout, and leaves its neighbours exactly where they were.

   It cannot flicker at the far edge: the link keeps its own box while the
   title travels, so a cursor resting on the title stays inside the link.

   Only a real pointer brings it out. The slideshow lights its current title
   with .is-current, never :hover, so none of this happens while the titles
   are cycling on their own. Touch screens get none of it — no hover to
   reveal it, and nothing to leave stuck after a tap. */
.kc-hero__go,
.kc-hero__loc { display: none; }

@media (hover: hover) and (pointer: fine) {
	.kc-hero__link { position: relative; }

	.kc-hero__title { transition: transform 380ms var(--ease); }

	.kc-hero__go {
		display: block;
		position: absolute;
		left: 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);
		/* Matches .kc-hero__arrow, so the two read as one glyph. */
		filter: drop-shadow(0 1px 4px rgb(0 0 0 / .6));
		pointer-events: none;
	}

	.kc-hero__link:hover .kc-hero__go {
		opacity: 1;
		transform: translate(0, -50%);
	}

	/* The arrow's width plus the gap it keeps from the title. */
	.kc-hero__link:hover .kc-hero__title,
	.kc-hero__link:hover .kc-hero__loc {
		transform: translateX(calc(var(--kc-hero-size) * .72));
	}

	/* The location, small and in caps, centred on the title — on the same
	   horizontal line as the arrow, so arrow, title and place read as one row.
	   It travels with the title (it has to, or the title would slide over it)
	   and fades in as it goes. Typed in normal case in the editor; the caps
	   are CSS. */
	.kc-hero__loc {
		display: block;
		flex: none;
		align-self: center;
		margin-left: calc(var(--kc-hero-size) * .16);
		font-family: var(--font-display);
		font-size: clamp(.6875rem, .9vw, .8125rem);
		font-weight: 500;
		line-height: 1;
		letter-spacing: .1em;
		text-transform: uppercase;
		white-space: nowrap;
		text-shadow: 0 1px 6px rgb(0 0 0 / .5);
		opacity: 0;
		transition: opacity 240ms var(--ease), transform 380ms var(--ease);
		pointer-events: none;
	}

	.kc-hero__link:hover .kc-hero__loc { opacity: .9; }
}

@media (prefers-reduced-motion: reduce) {
	.kc-hero__title,
	.kc-hero__go,
	.kc-hero__loc { transition: opacity 1ms; }
}


/* Hovering one title dims the rest, so the frame and the name agree. */
@media (hover: hover) {
	.kc-hero__list:hover .kc-hero__link { opacity: .42; }
	.kc-hero__list .kc-hero__link:hover { opacity: 1; }
}

/* Autoplay does the same thing to itself. The class is only present while the
   slideshow is running, so a hover removes it and the rules above take over —
   otherwise this heavier selector would beat them. The fade is slow to match
   the frame's own reveal rather than snapping like a pointer response. */
.kc-hero__list.is-cycling .kc-hero__link {
	opacity: .42;
	transition: opacity 700ms var(--ease-frame);
}

.kc-hero__list.is-cycling .kc-hero__link.is-current { opacity: 1; }

/* No box on a title. Over a photograph a rounded halo reads as a dialog
   border, and it turned up without anyone pressing Tab: click a trip, press
   Back, and the browser restores focus to that link — which Chrome then
   draws as keyboard focus if the keyboard has been touched at all.

   Keyboard focus looks exactly like hover instead: the focused title stays
   lit and the rest of its set recede. That is still an unmistakable answer
   to "where am I", and a restored focus just looks like a hover. */
.kc-hero__link:focus-visible {
	opacity: 1;
	outline: none;
	box-shadow: none;
}

.kc-hero__list:has(.kc-hero__link:focus-visible) .kc-hero__link { opacity: .42; }
.kc-hero__list:has(.kc-hero__link:focus-visible) .kc-hero__link:focus-visible { opacity: 1; }

/* --- the pager --------------------------------------------------------- */

.kc-hero__pager {
	margin-left: auto;
	flex: none;
	display: flex;
	align-items: center;
	padding-bottom: .9rem;
}

/* A bare arrow, no chrome. Contrast comes from a shadow rather than a plate,
   so it stays quiet over any photograph. */
.kc-hero__next {
	display: grid;
	place-items: center;
	padding: var(--sp-3);
	margin: calc(var(--sp-3) * -1);
	border: 0;
	background: none;
	color: #fff;
	cursor: pointer;
	transition: transform var(--speed) var(--ease), opacity var(--speed) var(--ease);
	opacity: .85;
	/* Sit the arrow's foot on the digits' foot rather than on the line box. */
	margin-bottom: calc(var(--kc-hero-size) * .155 - var(--sp-3) * 2);
}

/* Deliberately identical to .kc-hero__go — same path, same viewBox, same
   stroke, same width formula, same shadow. They were two different arrows
   (this one long and hairline, the hover one compact with a bigger head) and
   side by side on one screen the difference showed. */
.kc-hero__arrow {
	display: block;
	width: var(--kc-arrow);
	height: auto;
	filter: drop-shadow(0 1px 4px rgb(0 0 0 / .6));
}

.kc-hero__next:hover {
	opacity: 1;
	transform: translateX(5px);
}

/* Same as the titles: the arrow answers focus the way it answers a pointer,
   by nudging forward, rather than growing a box. */
.kc-hero__next:focus-visible {
	outline: none;
	box-shadow: none;
	opacity: 1;
	transform: translateX(5px);
}

/* --- the header sits on the photograph --------------------------------- */

.home .kc-header {
	position: absolute;
	inset: 0 0 auto;
	/* Below the menu panel, which carries its own close button. */
	z-index: 50;
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-bottom: 0;
	color: #fff;
}

.home .kc-header[data-scrolled="true"] {
	background: transparent;
	border-bottom-color: transparent;
}

.home .kc-brand,
.home .kc-burger,
.home .kc-utility { color: #fff; }

/* Paper lockup over the photograph. */
.home .kc-brand__logo--ink { display: none; }
.home .kc-brand__logo--paper { display: block; }

.home .kc-utility { opacity: .82; }
.home .kc-utility:hover { opacity: 1; color: #fff; }

/* Same reasoning as the arrow: the header sits on an unknown photograph, so
   the chrome carries its own contrast instead of trusting the frame. */
.home .kc-brand,
.home .kc-burger,
.home .kc-utility { text-shadow: 0 1px 4px rgb(0 0 0 / .5); }

.home .kc-burger__bar { box-shadow: 0 1px 4px rgb(0 0 0 / .5); }


.home .kc-hero__title { text-shadow: 0 2px 12px rgb(0 0 0 / .35); }

/* The hero owns the whole viewport, so the main element adds nothing. */
.home .kc-main { min-height: 0; }

/* The front page is one frame with nothing under it (no footer), so it must
   not scroll. On a phone it still did: the hero is 100lvh so the photograph
   fills the screen whatever Safari's bars are doing, and while the bars show,
   that is taller than the visible area by exactly the bars' height, which
   iOS turns into a short scroll. Lock the page instead of shrinking the frame;
   the titles are already lifted clear of the bars (see .kc-hero__body). */
html:has(> body.home),
body.home {
	overflow: hidden;
	overscroll-behavior: none;
}
/* Opening the menu must not be the thing that scrolls either. */
body.home.kc-menu-open { overflow: hidden; }
.home .kc-footer { margin-top: 0; }

/* ---------------------------------------------------------------------------
 * The story hero — one full-screen photograph opening a photo essay.
 *
 * Same frame as the front page, different job: there the picture is a backdrop
 * for a list of trips, here it is the cover of this one. So the title sits dead
 * centre rather than in the corner, and the arrow points down into the essay
 * instead of sideways to the next set.
 * ------------------------------------------------------------------------ */

.kc-storyhero {
	position: relative;
	width: 100%;
	/* lvh for the same reason as the front page: the LARGE viewport is the
	   tallest the screen can ever be, so the frame can never come up short and
	   let the article show underneath while iOS still has its bars out. */
	min-height: 100vh;
	min-height: 100lvh;
	display: grid;
	place-items: center;
	overflow: clip;
	background: #0b0a09;
	color: #fff;
	isolation: isolate;
}

.kc-storyhero__frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -2;
}

/* No scrim here either. It darkened the header band and pooled under the
   type in each bottom corner; Kris removed both scrims so the photograph is
   shown as shot. The type keeps its own text-shadow and the arrow its drop
   shadow. The measurements behind the old pools are in the README if a
   cover ever needs one back. */
.kc-storyhero__scrim { display: none; }

/* Upper left, not centred. It shares the frame with the micrographics in the
   opposite corner and the arrow in the third, so the three sit on the same
   gutter and the photograph keeps its middle.

   The top inset has to clear the header, which is `position: fixed` on a cover
   page and so overlaps rather than pushes: 3.75rem of min-height plus its own
   top padding, then a gap. */
/* Title and micrographics are one block in the bottom-left corner, the title
   sitting directly on top of the annotation. They are a single flex column
   rather than two separately positioned things, so the title always lands just
   above the date whether the annotation runs to two lines or five. */
.kc-storyhero__body {
	grid-area: 1 / 1;
	place-self: end start;
	width: min(100% - (var(--gutter) * 2), 46rem);
	/* Clear of the arrow in the opposite corner however long a line runs. */
	max-width: calc(100% - (var(--gutter) * 2) - 5rem);
	padding-left: calc(var(--gutter) + env(safe-area-inset-left));
	padding-bottom: calc(var(--gutter) + env(safe-area-inset-bottom));
	text-align: left;
}

/* Same reasoning as the arrow: while Safari's bars are showing, the last
   (100lvh - 100svh) of the frame is below the fold. Resolves to zero
   everywhere else. */
@supports (height: 100lvh) and (height: 100svh) {
	.kc-storyhero__body {
		padding-bottom: calc(var(--gutter) + env(safe-area-inset-bottom) + (100lvh - 100svh));
	}
}

@media (max-width: 700px) {
	.kc-storyhero__body {
		max-width: calc(100% - (var(--gutter) * 2) - 3.25rem);
	}
}

.kc-storyhero__title {
	margin: 0;
	font-family: var(--font-hero);
	/* Larger than the old centred masthead: on a page that opens on a single
	   photograph, the title is the cover, not a caption. */
	font-weight: 400;
	font-size: clamp(2.5rem, 7.6vw, 7rem);
	line-height: 1.02;
	letter-spacing: -.012em;
	/* `balance` evens the ragged edge of a centred block; against a hard left
	   margin it just makes the rag arbitrary. `pretty` only guards widows. */
	text-wrap: pretty;
	text-shadow: 0 2px 14px rgb(0 0 0 / .4);
}

/* --- the micrographics ------------------------------------------------- */

/* A technical annotation in the corner: date, place, coordinates, frames,
   camera. Everything derivable is derived — the editor panel only ever holds
   what the site cannot work out for itself.

   Clash Grotesk rather than a monospace. The references for this are all mono,
   but adding a face costs a webfont and another licence, and tabular figures
   plus wide tracking carry most of the effect. */
.kc-storyhero__meta {
	/* Positioned by the block above rather than against the frame: it sits
	   directly under the title now. */
	margin-top: clamp(var(--sp-3), 1.4vw, var(--sp-5));
	font-family: var(--font-mono);
	font-size: var(--step--2);
	font-weight: 500;
	/* A monospace is already wide, so it needs about half the tracking the
	   grotesque did — .16em here looked like a ransom note. Figures column up
	   on their own, which is what tabular-nums was faking before. */
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgb(255 255 255 / .88);
	text-shadow: 0 1px 7px rgb(0 0 0 / .55);
	text-align: left;
	pointer-events: none;
}

.kc-storyhero__metaline {
	margin: 0;
	line-height: 1.55;
	text-wrap: nowrap;
}

.kc-storyhero__sep {
	/* Letter-spacing is applied to the RIGHT of every character, including the
	   separator itself — so equal margins render unequal. Both sides are set
	   short by that tracking to land on an even .5em gap either way. */
	margin: 0 .34em 0 .34em;
	opacity: .55;
}

@media (max-width: 700px) {
	.kc-storyhero__meta {
		font-size: .6875rem;
		letter-spacing: .13em;
	}
	.kc-storyhero__metaline { line-height: 1.7; }
}

/* --- the arrow down ---------------------------------------------------- */

/* A real anchor, so it still jumps to the photographs with JavaScript off;
   html { scroll-behavior: smooth } does the rest. Bare, like the front page's
   arrow — contrast from a drop shadow rather than a plate. */
.kc-storyhero__down {
	position: absolute;
	right: calc(var(--gutter) + env(safe-area-inset-right));
	bottom: calc(var(--gutter) + env(safe-area-inset-bottom));
	display: block;
	/* It only ever held an SVG before, so the default link underline never had
	   anything to draw under. Now it holds a word. */
	text-decoration: none;
	padding: var(--sp-3);
	margin: calc(var(--sp-3) * -1);
	color: #fff;
	opacity: .85;
	transition: transform var(--speed) var(--ease), opacity var(--speed) var(--ease);
}

/* Same trick as .kc-hero__body: while Safari's bars are showing, the last
   (100lvh - 100svh) of the frame is below the fold, which is exactly where the
   arrow would otherwise sit. Resolves to zero everywhere else. */
@supports (height: 100lvh) and (height: 100svh) {
	.kc-storyhero__down {
		bottom: calc(var(--gutter) + env(safe-area-inset-bottom) + (100lvh - 100svh));
	}
}

/* The homepage arrow turned to point down: the same path rotated a quarter
   turn, so its length — the homepage arrow's width — is this one's height,
   and both come from --kc-arrow. Same stroke, same shadow. */
.kc-storyhero__arrow {
	display: block;
	width: auto;
	height: var(--kc-arrow);
	filter: drop-shadow(0 1px 4px rgb(0 0 0 / .6));
}

/* "Scroll", set to match the homepage's location label: the same size, weight,
   tracking and caps in the display face. It is a hint for arriving, not a
   control, so it fades away as soon as the reader starts down the page and
   comes back if they return to the top. site.js sets data-scrolled.

   aria-hidden: the link already carries a proper accessible name, and a
   screen reader does not need to be told to scroll. */
.kc-storyhero__hint {
	/* Above the arrow and centred on it. Positioned rather than stacked in the
	   flow, so the link stays exactly the arrow's size: the arrow keeps its
	   place on the gutter, level with the homepage pager and Contact, and the
	   word is free to be wider than a thin vertical stroke. The calc cancels
	   the link's own padding so the gap is measured from the arrow itself. */
	position: absolute;
	left: 50%;
	bottom: calc(100% - var(--sp-3) + .8em);
	transform: translateX(-50%);
	font-family: var(--font-display);
	font-size: clamp(.6875rem, .9vw, .8125rem);
	font-weight: 500;
	line-height: 1;
	letter-spacing: .1em;
	text-transform: uppercase;
	white-space: nowrap;
	text-shadow: 0 1px 6px rgb(0 0 0 / .5);
	transition: opacity 320ms var(--ease);
}

.kc-storyhero[data-scrolled="true"] .kc-storyhero__hint { opacity: 0; }

@media (max-width: 700px) {
	/* A phone's gutter is 20px, so a word centred over a hairline arrow runs
	   right up to the edge of the screen. Stacking them in the flow instead
	   makes the link as wide as the word: the word sits inside the gutter and
	   the arrow stays centred beneath it. */
	.kc-storyhero__down {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: .7em;
	}

	.kc-storyhero__hint {
		position: static;
		transform: none;
	}
}

.kc-storyhero__down:hover {
	opacity: 1;
	transform: translateY(5px);
}

.kc-storyhero__down:focus-visible {
	outline: none;
	box-shadow: none;
	opacity: 1;
	transform: translateY(5px);
}

@media (prefers-reduced-motion: reduce) {
	.kc-storyhero__down { transition: none; }
	.kc-storyhero__hint { transition: opacity 1ms; }
}

/* The arrow lands on the exact bottom edge of the cover. html carries a 6rem
   scroll-padding-top so an in-page anchor clears the sticky header, but here
   that would stop 6rem short and leave a strip of the cover hanging at the top
   of the screen — and the header does not need clearing anyway, because
   arriving here is a downward scroll and a downward scroll is exactly what
   sends the header away. A matching negative scroll-margin cancels it out. */
.kc-storyhero + .kc-story { scroll-margin-top: -6rem; }

/* The masthead used to open the page and carried all the space above the first
   photograph. With a cover above it, that space has to come from the article
   itself, or the essay butts straight up against the frame. */
.kc-storyhero + .kc-story { padding-top: clamp(3rem, 7vw, 5rem); }

/* A standfirst after a full-screen cover is an introduction, not a masthead,
   so it brings none of the masthead's own space with it. */
.kc-storyhead--after {
	padding-block: 0 clamp(1.5rem, 4vw, 2.5rem);
}

/* --- the header over the cover ----------------------------------------- */

/* Sticky elements still occupy their space in the flow, so on a page that opens
   on a cover the header pushed the frame down by its own height and "full
   screen" came up exactly that much short. Fixed keeps the same behaviour —
   pinned to the top, still hiding on the way down — without the flow cost.
   Nothing is hidden underneath it, because the cover is the first thing. */
.kc-has-cover .kc-header {
	position: fixed;
	inset: 0 0 auto;
}

/* A story's header is transparent already; over the cover it only has to stop
   being ink, since an ink lockup on a dark photograph is no lockup at all.
   site.js sets the attribute and clears it once the cover is behind us. */
.kc-header[data-over-hero="paper"] {
	color: #fff;
}

.kc-header[data-over-hero="paper"] .kc-brand,
.kc-header[data-over-hero="paper"] .kc-burger,
.kc-header[data-over-hero="paper"] .kc-utility {
	color: #fff;
	text-shadow: 0 1px 4px rgb(0 0 0 / .5);
}

.kc-header[data-over-hero="paper"] .kc-burger__bar { box-shadow: 0 1px 4px rgb(0 0 0 / .5); }

.kc-header[data-over-hero="paper"] .kc-utility { opacity: .82; }
.kc-header[data-over-hero="paper"] .kc-utility:hover { opacity: 1; color: #fff; }

.kc-header[data-over-hero="paper"] .kc-brand__logo--ink { display: none; }
.kc-header[data-over-hero="paper"] .kc-brand__logo--paper {
	display: block;
	/* The lockup is an image, so the text-shadow that carries the burger and
	   Contact does nothing for it. Same contrast, drawn round the mark itself —
	   it has to survive a white gallery wall as well as a night street. */
	filter: drop-shadow(0 1px 4px rgb(0 0 0 / .55));
}

/* An ink cover needs the opposite help: the lockup is already ink, so all it
   wants is a pale halo to hold it off a light photograph. */
.kc-header[data-over-hero="ink"] .kc-brand,
.kc-header[data-over-hero="ink"] .kc-burger,
.kc-header[data-over-hero="ink"] .kc-utility { text-shadow: 0 1px 4px rgb(255 255 255 / .65); }

.kc-header[data-over-hero="ink"] .kc-burger__bar { box-shadow: 0 1px 4px rgb(255 255 255 / .65); }


/* --- an ink cover ------------------------------------------------------ */

/* For a frame that is light edge to edge, where white type has nothing to sit
   on. Everything flips together — title, micrographics, arrow, lockup — because
   a black corner block under a white centred title reads as a bug, not a
   choice. (There is no scrim to flip any more; the ink type relies on its own
   pale halo, as the paper type relies on its dark one.) */
.kc-storyhero--ink {
	background: #f3f2ef;
	color: var(--ink);
}

.kc-storyhero--ink .kc-storyhero__scrim { display: none; }

.kc-storyhero--ink .kc-storyhero__title {
	color: var(--ink);
	text-shadow: 0 2px 14px rgb(255 255 255 / .5);
}

.kc-storyhero--ink .kc-storyhero__meta {
	color: rgb(19 18 16 / .82);
	text-shadow: 0 1px 7px rgb(255 255 255 / .65);
}

.kc-storyhero--ink .kc-storyhero__down { color: var(--ink); }
.kc-storyhero--ink .kc-storyhero__hint { text-shadow: 0 1px 6px rgb(255 255 255 / .65); }

.kc-storyhero--ink .kc-storyhero__arrow {
	filter: drop-shadow(0 1px 4px rgb(255 255 255 / .7));
}

.kc-storyhero--ink .kc-storyhero__down:focus-visible { box-shadow: none; }