@font-face { font-family: "VT323"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/vt323-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: "VT323"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/vt323-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Cargo's base: root size 12.6px */
html { font-size: 12.6px; } body { margin: 0; }
/* phones: Cargo's 1.3x was too big (the Home head filled the screen); smaller text also shrinks the face behind it */
@media (max-width: 700px) { html { font-size: 10.4px; } .title { letter-spacing: .09em; } }
bodycopy { display: block; }
bodycopy {
	font-size: 1.75rem;
	font-weight: 400;
	color: #f3ede3;
	font-family: "VT323";
	font-style: normal;
	line-height: 1.25;
	letter-spacing: 0.06em;
	display: block;
}bodycopy a {
	color: #f3ede3;
	text-decoration: none;
}bodycopy a:hover {
	color: #1e1610;
	background: #f3ede3;
}h1 {
	font-family: "VT323";
	font-style: normal;
	font-weight: 400;
	margin: 0;
	font-size: 3.3rem;
	line-height: 1;
	color: #f3ede3;
	letter-spacing: 0.2em;
}h1 a {
	color: #f3ede3;
	text-decoration: none;
}.caption {
	font-size: 1.4rem;
	font-weight: 400;
	color: #84a3a5;
	font-family: "VT323";
	font-style: normal;
	line-height: 1.2;
	letter-spacing: 0.12em;
	display: block;
}.caption a {
	color: #84a3a5;
	text-decoration: none;
}.caption a:hover {
	color: #1e1610;
	background: #84a3a5;
}
.title {
	--text-style: "Title";
	font-size: 4.4rem;
	font-weight: 400;
	color: #f3ede3;
	font-family: "VT323";
	font-style: normal;
	line-height: 1;
	letter-spacing: 0.14em;
	display: block;
}

.title a {
	color: #f3ede3;
	text-decoration: none;
}

.subtitle {
	--text-style: "Subtitle";
	font-size: 1.75rem;
	font-weight: 400;
	color: #84a3a5;
	font-family: "VT323";
	font-style: normal;
	line-height: 1.2;
	letter-spacing: 0.12em;
	text-transform: lowercase;
	display: block;
}

.subtitle a {
	color: #84a3a5;
	text-decoration: none;
}

.nav {
	--text-style: "Nav";
	font-size: 1.75rem;
	font-weight: 400;
	color: #f3ede3;
	font-family: "VT323";
	font-style: normal;
	line-height: 1.5;
	letter-spacing: 0.3em;
	display: block;
}

.nav a {
	color: #f3ede3;
	text-decoration: none;
}

.nav a:hover {
	color: #1e1610;
	background: #f3ede3;
}

/* ===== ELLIS TRITH MINIMAL — layout only (Site Settings → CSS, after the text styles) =====
   No fonts, sizes or text colours here: those all come from the text styles
   (Title, Heading 1, Subtitle, Nav, Bodycopy, Caption) so the Aa panel controls them. */
:root { --tm-bg: #1e1610; }
html, body { background: var(--tm-bg) !important; }
html, body { overflow-x: clip; max-width: 100%; }   /* never any sideways scrolling */
body, .page, .page-content, bodycopy { background: transparent !important; }

.tm-wrap { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 8vh 6vw; box-sizing: border-box; }
.tm-center { width: min(640px, 100%); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.tm-center .title, .tm-center h1 { white-space: nowrap; }
.tm-nav { margin-top: 6px; }
.tm-nav a { padding: 0 .4em; }
.tm-box { width: 100%; border: 1px dashed currentColor; padding: 18px; box-sizing: border-box;
  background: rgba(30,22,16,.72); aspect-ratio: 1 / 1.41; display: flex; align-items: center; justify-content: center; }
.tm-wide { aspect-ratio: 16 / 9; }
.tm-sq { aspect-ratio: 1 / 1; padding: 8px; }
.tm-grid { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tm-row { width: 100%; display: flex; justify-content: space-between; }
.tm-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.tm-p { max-width: 46ch; margin: 0; }
.tm-home { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 10; }
/* dark backings behind titles, subtitles, the home menu and the top link; the engine makes their border breathe */
.tm-center > h1, .tm-center > .title, .tm-center > .subtitle, .tm-nav, .tm-home { background: var(--kal-bg, #1e1610); padding: .45em .9em; box-sizing: border-box; }
.tm-nav { padding: .6em 1.4em; }
/* homepage: no boxes; the engine's dithered centre wraps round all the words. Title sits close to the menu */
body.home .tm-center { gap: 8px; }
body.home .tm-center > .title, body.home .tm-center > .subtitle, body.home .tm-nav { background: none !important; padding: 0 !important; }
body.home .tm-center > .subtitle { margin-top: -2px; }
body.home .tm-nav { margin-top: 10px; }
body.home .tm-home { display: none; }
/* phones: home menu words are bigger tap targets, the small subtitle line is dropped (fewer words) */
@media (max-width: 600px) { body.home .tm-center > .subtitle { display: none; } body.home .tm-nav a { display: inline-block; padding: .35em 1.4em; } }
@media (max-width: 600px) { .tm-grid { grid-template-columns: repeat(2, 1fr); } .tm-center .title, .tm-center h1 { white-space: normal; } }

/* WALKS (flashlight page): header up top, hidden links masked to the engine's beam */
.walk-head { position: fixed; top: 7vh; left: 50%; transform: translateX(-50%); width: auto; z-index: 5; }
.kal-dark { position: fixed; inset: 0; z-index: 4; pointer-events: none;
  -webkit-mask: radial-gradient(circle var(--fl-r, 0px) at var(--fl-x, -999px) var(--fl-y, -999px), #000 55%, transparent 100%);
  mask: radial-gradient(circle var(--fl-r, 0px) at var(--fl-x, -999px) var(--fl-y, -999px), #000 55%, transparent 100%); }
.kal-dark-link { position: absolute; pointer-events: auto; white-space: nowrap; }
.kal-scene { display: none; } .kal-scene.on { display: block; }

/* the old ✎ notes to Seth are hidden everywhere (kept only so pages that still contain them stay clean) */
.tm-note { display: none !important; }