/* ---------------------------------------------------------------------------
 * Clash Grotesk — the one face on the site.
 *
 * LICENCE: cleared. Clash Grotesk is Indian Type Foundry's, via Fontshare,
 * and is free for personal and commercial use with web embedding included.
 * ITF asks only to be credited by name wherever design credits are given.
 *
 * It replaced Museo Sans, which came from a free-font aggregator on a
 * desktop-only EULA and would have needed a Fontspring webfont licence before
 * this site could go public. Those files are deleted, not just unreferenced.
 * ------------------------------------------------------------------------ */

/* Clash Grotesk — Indian Type Foundry, via Fontshare. Free for personal AND
   commercial use, web included — the whole site runs on it. ITF
   asks only to be credited by name wherever design credits are given.

   One variable file rather than three statics: 46 KB against 59 KB, and it
   covers every weight from 200 to 700 instead of three fixed steps. There are
   no italics in the family — see .kc-footer__quote. */
/* Instrument Sans — Instrument, OFL. The footer only. Its width axis is pinned
   at 100: left variable the file was 74 KB, pinned it is 36 KB, and nothing on
   this site asks for a condensed footer. */
@font-face {
	font-family: "Instrument Sans";
	src: url("../fonts/InstrumentSans.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}

/* Maheni — Craft Supply Co, licensed for web by Kris. It is the brand face:
   its squared bowls are cut the same way the KC lockup is, which is why it
   lives in his brand folder next to the logo. Header, navigation and footer
   only, and always in caps — see the tracking note in layout.css. 12 KB. */
@font-face {
	font-family: "Maheni";
	src: url("../fonts/Maheni-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* Google Sans Code — OFL, and the only member of the Google Sans family that
   is actually licensed for anyone outside Google: Google Sans and Product Sans
   are the company's brand faces and are not in the open catalogue at all.

   It carries the technical layer — captions and the cover micrographics. Those
   were always reaching for a monospace; Clash was the compromise when adding a
   face meant adding a licence. 30 KB subset to Latin. */
@font-face {
	font-family: "Google Sans Code";
	src: url("../fonts/GoogleSansCode-Text.woff2") format("woff2");
	font-weight: 300 800;
	font-style: normal;
	font-display: swap;
}

/* Univers — Adrian Frutiger, Monotype. Web licence purchased by Kris (receipt
   confirmed 14 Sep 2026). Story and prose paragraphs only. Regular and Bold,
   subset to Latin; the static TTFs are 77 KB each, 16-17 KB as subset WOFF2. */
@font-face {
	font-family: "Univers";
	src: url("../fonts/Univers-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Univers";
	src: url("../fonts/Univers-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Clash Grotesk";
	src: url("../fonts/ClashGrotesk-Variable.woff2") format("woff2");
	font-weight: 200 700;
	font-style: normal;
	font-display: swap;
}

/* ---------------------------------------------------------------------------
 * Kristoffer Canimo 2026 — design tokens.
 * This is the only stylesheet allowed to contain a literal colour value.
 *
 * Direction: photography first, editorial, near-monochrome. The page is warm
 * ink on warm paper and carries no brand colour of its own, so every colour a
 * visitor sees comes out of the photographs.
 * ------------------------------------------------------------------------ */

:root {
	/* The homepage title size — and the one value every arrow on the site is
	   drawn from: the homepage pager, the arrow beside a hovered title, and the
	   down arrow on a post cover. They are the same glyph at the same size, so
	   they must not each carry their own clamp. */
	--kc-hero-size: clamp(2.125rem, 6.2vw, 74px);
	--kc-arrow: calc(var(--kc-hero-size) * .5);

	/* Light, always. light-dark() resolves against color-scheme, so pinning it
	   here pins every semantic token below to its first value. Dark is still
	   written out — restoring it is a matter of putting `dark` back. */
	color-scheme: light;

	/* --- neutral ramp, warm ------------------------------------------ */
	--n-00: #ffffff;
	--n-05: #fbfaf8;
	--n-10: #f3f1ec;
	--n-20: #e6e2da;
	--n-30: #d3cec4;
	--n-50: #8e8a80;
	--n-60: #6a665e;
	--n-70: #4a473f;
	--n-85: #24221d;
	--n-95: #131210;
	--n-99: #0b0a09;

	/* --- semantic ----------------------------------------------------- */
	--bg:          light-dark(var(--n-00), var(--n-99));
	--bg-sunk:     light-dark(var(--n-10), #14130f);
	--bg-raised:   light-dark(var(--n-00), #1a1815);
	--bg-inverse:  light-dark(var(--n-95), #000000);

	--ink:         light-dark(var(--n-95), #ece8e1);
	--ink-soft:    light-dark(var(--n-70), #a9a49b);
	--ink-faint:   light-dark(var(--n-50), #7d786f);
	--ink-inverse: light-dark(#f2efe9, #ece8e1);

	/* Monochrome by design: the accent is the ink, not a hue. */
	--accent:      light-dark(var(--n-95), #ece8e1);
	--accent-ink:  light-dark(var(--n-05), var(--n-99));

	--rule:        light-dark(var(--n-20), #262420);
	--rule-strong: light-dark(var(--n-30), #35322c);

	--shadow-soft: light-dark(0 1px 2px rgb(19 18 16 / .05), 0 1px 2px rgb(0 0 0 / .5));
	--shadow-lift: light-dark(0 18px 44px -20px rgb(19 18 16 / .28), 0 18px 44px -20px rgb(0 0 0 / .8));
	--scrim:       light-dark(rgb(11 10 9 / .92), rgb(0 0 0 / .94));
	/* The photo viewer goes darker than a menu overlay: anything of the page
	   still showing through competes with the photograph. */
	--scrim-photo: rgb(7 7 6 / .975);

	/* A caption sits on the photograph, so its colour belongs to the frame and
	   not to the page: it stays the same in either scheme. */
	--photo-ink: rgb(255 255 255 / .95);

	/* Monochrome, like everything else here: a blue system ring was the one
	   piece of colour on the whole site. The halo variants are for controls
	   that sit on a photograph, where the page's ink would vanish. */
	--focus:       light-dark(var(--n-95), #ece8e1);
	--focus-ring:  0 0 0 3px light-dark(rgb(19 18 16 / .16), rgb(255 255 255 / .22));
	--focus-ring-paper: 0 0 0 3px rgb(255 255 255 / .38);

	/* --- type --------------------------------------------------------- */
	/* Two faces, each doing one job. Clash Grotesk is the DEFAULT — headings
	   and every piece of chrome — and Univers is opted into, by prose only.
	   That way round on purpose: setting the text face as the page default
	   and then chasing the chrome back out of it misses things. */
	--font-display: "Clash Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
	--font-text: "Univers", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font-mono: "Google Sans Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--font-brand: "Maheni", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
	--font-footer: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
	--font-sans: var(--font-display);
	/* The hero titles use the same heading face. */
	--font-hero: var(--font-display);

	--step--2: clamp(.75rem, .74rem + .05vw, .78125rem);
	--step--1: clamp(.8125rem, .79rem + .11vw, .875rem);
	--step-0:  clamp(1.0625rem, 1.03rem + .17vw, 1.125rem);
	--step-1:  clamp(1.25rem, 1.18rem + .35vw, 1.4375rem);
	--step-2:  clamp(1.5rem, 1.35rem + .75vw, 2rem);
	--step-3:  clamp(1.875rem, 1.58rem + 1.48vw, 2.875rem);
	--step-4:  clamp(2.375rem, 1.85rem + 2.63vw, 4.125rem);
	--step-5:  clamp(2.75rem, 1.9rem + 4.25vw, 5.5rem);

	/* --- space -------------------------------------------------------- */
	--sp-1: .25rem;
	--sp-2: .5rem;
	--sp-3: .75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 3rem;
	--sp-8: 4.5rem;
	--sp-9: 7rem;
	--sp-10: clamp(5rem, 12vw, 11rem);

	/* --- layout -------------------------------------------------------- */
	--shell: 1240px;
	--shell-wide: 1600px;
	--shell-narrow: 62ch;
	--gutter: clamp(1.25rem, 5vw, 4.5rem);
	--radius: 2px;
	--radius-sm: 2px;

	--speed: 260ms;
	--ease: cubic-bezier(.32, .72, 0, 1);
	/* --ease covers most of its distance in the first quarter, which is right
	   for UI but makes a blur vanish before you notice it. The frame uses a
	   curve that holds near the start instead. */
	--ease-frame: cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
	:root { --speed: 1ms; }
}

/* ---------------------------------------------------------------------------
 * Fallback for browsers without light-dark(). Without this the semantic
 * tokens resolve to nothing and the page loses its background entirely.
 * ------------------------------------------------------------------------ */

@supports not (color: light-dark(#000, #fff)) {
	:root {
		--bg:          var(--n-00);
		--bg-sunk:     var(--n-10);
		--bg-raised:   var(--n-00);
		--bg-inverse:  var(--n-95);
		--ink:         var(--n-95);
		--ink-soft:    var(--n-70);
		--ink-faint:   var(--n-50);
		--ink-inverse: #f2efe9;
		--accent:      var(--n-95);
		--accent-ink:  var(--n-05);
		--rule:        var(--n-20);
		--rule-strong: var(--n-30);
		--shadow-soft: 0 1px 2px rgba(19, 18, 16, .05);
		--shadow-lift: 0 18px 44px -20px rgba(19, 18, 16, .28);
		--scrim:       rgba(11, 10, 9, .92);
		--scrim-photo: rgba(7, 7, 6, .975);
		--focus:       var(--n-95);
		--focus-ring:  0 0 0 3px rgb(19 18 16 / .16);
		--focus-ring-paper: 0 0 0 3px rgb(255 255 255 / .38);
	}

	}
}