/*
 * base.css — design tokens and the readable document.
 *
 * Everything here applies whether or not JavaScript runs. The two shells —
 * os.css on a desktop, phone.css below the breakpoint — layer on top and are
 * scoped to .js, so this file is the whole experience for a visitor without
 * scripts, and the fallback both shells hand their content back to.
 *
 * Tokens are ported from the interactive prototype in design/.
 */

/* -------------------------------------------------------------------------
 * 1. Tokens — light
 * ---------------------------------------------------------------------- */

:root {
	color-scheme: light;

	--bg: #f7f7f4;

	--ink: #182226;
	--ink2: #2a363c;
	--ink3: #465359;
	--muted: #53616a;
	--muted2: #7a868c;

	--accent: #1f5f6b;
	--accent-text: #1f5f6b;
	--accent-tint: #e6f1f2;
	--accent-tint2: #eef3f4;
	--accent-hover: rgba(31, 95, 107, .06);
	--accent-sel: rgba(31, 95, 107, .1);

	--alert-text: #a8321f;
	--alert-tint: #fbe3df;
	--warn: #8a5a12;
	--warn-tint: #fdf1dc;

	--surface: #fff;
	--surface2: #fbfbfa;
	--surface3: #fafbfb;
	--surface4: #f0f3f4;
	--surface5: #f5f8f8;
	--code: #f4f6f7;

	--glass: rgba(255, 255, 255, .34);
	--glass2: rgba(255, 255, 255, .5);
	--glass3: rgba(255, 255, 255, .55);
	--glass4: rgba(255, 255, 255, .4);
	--glass5: rgba(255, 255, 255, .75);
	--glass6: rgba(255, 255, 255, .8);

	--edge: rgba(255, 255, 255, .95);
	--edge2: rgba(255, 255, 255, 1);
	--hl: rgba(255, 255, 255, 1);
	--hl2: rgba(255, 255, 255, .35);

	--line1: rgba(20, 40, 50, .06);
	--line2: rgba(20, 40, 50, .07);
	--line3: rgba(20, 40, 50, .08);
	--line4: rgba(20, 40, 50, .1);
	--line5: rgba(20, 40, 50, .12);
	--line6: rgba(20, 40, 50, .14);

	--grid: rgba(20, 40, 50, .055);
	--blob1: rgba(140, 212, 222, .6);
	--blob2: rgba(198, 190, 236, .55);
	--blob3: rgba(176, 228, 200, .55);
	--blob4: rgba(250, 214, 200, .45);

	--tile: rgba(255, 255, 255, .6);
	--tile2: rgba(255, 255, 255, .35);
	--tile-grad: linear-gradient(160deg, #ffffff, #e6ebed);
	--tile-ink: #1f2a30;
	--tile-bg: #fff;
	--light-off: #d9dcdd;
	--stripe1: #e3eaec;
	--stripe2: #f2f5f6;

	--tl-close: #ee6a5f;
	--tl-min: #f5be4f;
	--tl-max: #61c554;

	--shadow-bar: 0 6px 20px rgba(20, 40, 50, .08);
	--shadow-panel: 0 12px 40px rgba(20, 40, 50, .1);
	--shadow-dock: 0 12px 40px rgba(20, 40, 50, .12);
	--shadow-win: 0 30px 70px rgba(20, 40, 50, .24), 0 0 0 1px rgba(20, 40, 50, .1);
	--shadow-win-idle: 0 20px 50px rgba(20, 40, 50, .16), 0 0 0 1px rgba(20, 40, 50, .08);
	--inner-glass: inset 0 1px 1px var(--hl), inset 0 -8px 20px var(--hl2);

	--font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Helvetica, system-ui, sans-serif;
	--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--radius-win: 14px;
	--radius-panel: 20px;
	--radius-tile: 15px;

	--speed: 200ms;
	--ease: cubic-bezier(.22, .61, .36, 1);
}

/* -------------------------------------------------------------------------
 * 2. Tokens — dark
 *
 * Declared twice on purpose: once for the system preference (unless the
 * visitor has explicitly chosen light) and once for the explicit choice, so
 * the toggle wins in both directions.
 * ---------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;

		--bg: #151b1f;

		--ink: #e6ecee;
		--ink2: #cfd8db;
		--ink3: #aab6bb;
		--muted: #98a6ac;
		--muted2: #7f8d93;

		--accent: #2a7f8c;
		--accent-text: #6cc0cb;
		--accent-tint: rgba(108, 192, 203, .16);
		--accent-tint2: rgba(108, 192, 203, .16);
		--accent-hover: rgba(108, 192, 203, .1);
		--accent-sel: rgba(108, 192, 203, .16);

		--alert-text: #f08a7c;
		--alert-tint: rgba(239, 107, 91, .18);
		--warn: #e0b06a;
		--warn-tint: rgba(224, 176, 106, .18);

		--surface: #1e262b;
		--surface2: #1a2126;
		--surface3: #232c31;
		--surface4: #2b353b;
		--surface5: #263137;
		--code: #10161a;

		--glass: rgba(30, 40, 46, .55);
		--glass2: rgba(30, 40, 46, .6);
		--glass3: rgba(30, 40, 46, .7);
		--glass4: rgba(30, 40, 46, .6);
		--glass5: rgba(30, 40, 46, .85);
		--glass6: rgba(40, 50, 56, .9);

		--edge: rgba(255, 255, 255, .14);
		--edge2: rgba(255, 255, 255, .1);
		--hl: rgba(255, 255, 255, .12);
		--hl2: rgba(255, 255, 255, .03);

		--line1: rgba(255, 255, 255, .06);
		--line2: rgba(255, 255, 255, .07);
		--line3: rgba(255, 255, 255, .08);
		--line4: rgba(255, 255, 255, .1);
		--line5: rgba(255, 255, 255, .14);
		--line6: rgba(255, 255, 255, .16);

		--grid: rgba(255, 255, 255, .04);
		--blob1: rgba(60, 130, 140, .45);
		--blob2: rgba(110, 100, 160, .4);
		--blob3: rgba(70, 130, 100, .4);
		--blob4: rgba(120, 80, 70, .35);

		--tile: rgba(255, 255, 255, .06);
		--tile2: rgba(255, 255, 255, .05);
		--tile-grad: linear-gradient(160deg, #3d4a51, #2a343a);
		--tile-ink: #e6ecee;
		--tile-bg: #2a343a;
		--light-off: #3a464d;
		--stripe1: #2b353b;
		--stripe2: #303b41;

		--shadow-bar: 0 6px 20px rgba(0, 0, 0, .35);
		--shadow-panel: 0 12px 40px rgba(0, 0, 0, .4);
		--shadow-dock: 0 12px 40px rgba(0, 0, 0, .45);
		--shadow-win: 0 30px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08);
		--shadow-win-idle: 0 20px 50px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 255, 255, .06);
	}
}

:root[data-theme="dark"] {
	color-scheme: dark;

	--bg: #151b1f;

	--ink: #e6ecee;
	--ink2: #cfd8db;
	--ink3: #aab6bb;
	--muted: #98a6ac;
	--muted2: #7f8d93;

	--accent: #2a7f8c;
	--accent-text: #6cc0cb;
	--accent-tint: rgba(108, 192, 203, .16);
	--accent-tint2: rgba(108, 192, 203, .16);
	--accent-hover: rgba(108, 192, 203, .1);
	--accent-sel: rgba(108, 192, 203, .16);

	--alert-text: #f08a7c;
	--alert-tint: rgba(239, 107, 91, .18);
	--warn: #e0b06a;
	--warn-tint: rgba(224, 176, 106, .18);

	--surface: #1e262b;
	--surface2: #1a2126;
	--surface3: #232c31;
	--surface4: #2b353b;
	--surface5: #263137;
	--code: #10161a;

	--glass: rgba(30, 40, 46, .55);
	--glass2: rgba(30, 40, 46, .6);
	--glass3: rgba(30, 40, 46, .7);
	--glass4: rgba(30, 40, 46, .6);
	--glass5: rgba(30, 40, 46, .85);
	--glass6: rgba(40, 50, 56, .9);

	--edge: rgba(255, 255, 255, .14);
	--edge2: rgba(255, 255, 255, .1);
	--hl: rgba(255, 255, 255, .12);
	--hl2: rgba(255, 255, 255, .03);

	--line1: rgba(255, 255, 255, .06);
	--line2: rgba(255, 255, 255, .07);
	--line3: rgba(255, 255, 255, .08);
	--line4: rgba(255, 255, 255, .1);
	--line5: rgba(255, 255, 255, .14);
	--line6: rgba(255, 255, 255, .16);

	--grid: rgba(255, 255, 255, .04);
	--blob1: rgba(60, 130, 140, .45);
	--blob2: rgba(110, 100, 160, .4);
	--blob3: rgba(70, 130, 100, .4);
	--blob4: rgba(120, 80, 70, .35);

	--tile: rgba(255, 255, 255, .06);
	--tile2: rgba(255, 255, 255, .05);
	--tile-grad: linear-gradient(160deg, #3d4a51, #2a343a);
	--tile-ink: #e6ecee;
	--tile-bg: #2a343a;
	--light-off: #3a464d;
	--stripe1: #2b353b;
	--stripe2: #303b41;

	--shadow-bar: 0 6px 20px rgba(0, 0, 0, .35);
	--shadow-panel: 0 12px 40px rgba(0, 0, 0, .4);
	--shadow-dock: 0 12px 40px rgba(0, 0, 0, .45);
	--shadow-win: 0 30px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08);
	--shadow-win-idle: 0 20px 50px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 255, 255, .06);
}

/* -------------------------------------------------------------------------
 * 3. Reset and base
 * ---------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font);
	font-size: 15px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

/*
 * An element carrying the hidden attribute is hidden, whatever display its
 * classes give it. The desktop hides cards, buttons and whole layers this way,
 * and every one of them sets a display of its own.
 */
[hidden] {
	display: none !important;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--accent-text);
	text-underline-offset: 2px;
}

a:hover {
	color: var(--ink);
}

:focus-visible {
	outline: 2px solid var(--accent-text);
	outline-offset: 2px;
	border-radius: 4px;
}

h1, h2, h3 {
	line-height: 1.2;
	letter-spacing: -.02em;
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

code, pre {
	font-family: var(--mono);
}

/* -------------------------------------------------------------------------
 * 4. Utilities
 * ---------------------------------------------------------------------- */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.eos-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	padding: 10px 16px;
	background: var(--surface);
	color: var(--ink);
	border-radius: 0 0 10px 0;
	box-shadow: var(--shadow-panel);
}

.eos-skip:focus {
	left: 0;
}

.eos-mono {
	font-family: var(--mono);
	font-size: .82em;
	color: var(--muted2);
	letter-spacing: .02em;
}

/* -------------------------------------------------------------------------
 * 4b. Status items
 *
 * The lock and the theme toggle. Shared rather than owned by either shell: the
 * menu bar holds them on a desktop, and below the breakpoint the phone moves
 * the same nodes into its status pill. Scoped to `.js` because that is the
 * only place they appear — the document has no status bar.
 * ---------------------------------------------------------------------- */

.js .eos-status {
	display: flex;
	align-items: center;
	gap: 6px;
	color: var(--ink2);
}

.js .eos-status__glyph {
	width: 14px;
	height: 14px;
	color: var(--accent);
}


/*
 * The lock's hover panel. Hidden here so the phone's status pill, which
 * borrows these very nodes, never shows it; os.css draws it on a desktop.
 */
.js .eos-status__tip {
	display: none;
}

/*
 * The network meter. Bars are drawn by activity.js, so this is an empty box
 * until something has been fetched — which is the correct resting state.
 */
.js .eos-activity__graph {
	display: block;
	width: 40px;
	height: 12px;
	overflow: visible;
}

.js .eos-activity__graph rect {
	fill: var(--muted2);
	opacity: .45;
	transition: height 180ms linear, y 180ms linear, opacity 180ms linear;
}

/* A bar carrying a real response, rather than the resting hairline. */
.js .eos-activity__graph rect[data-live="true"] {
	fill: var(--accent);
	opacity: 1;
}

.js .eos-toggle {
	position: relative;
	width: 28px;
	height: 15px;
	padding: 0;
	border-radius: 9px;
	border: 1px solid var(--line5);
	background: var(--light-off);
	cursor: pointer;
	transition: background var(--speed) var(--ease);
}

.js .eos-toggle[aria-pressed="true"] {
	background: var(--accent);
}

.js .eos-toggle__knob {
	position: absolute;
	left: 1px;
	top: 1px;
	display: grid;
	place-items: center;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
	transition: transform var(--speed) var(--ease);
}

.js .eos-toggle[aria-pressed="true"] .eos-toggle__knob {
	transform: translateX(13px);
}

/* A sun in the knob by day, and the accent by night. */
.js .eos-toggle__dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #f0b46a;
}

.js .eos-toggle[aria-pressed="true"] .eos-toggle__dot {
	background: var(--accent);
}

.js .eos-clock {
	font: 500 12.5px var(--mono);
	font-variant-numeric: tabular-nums;
	letter-spacing: .02em;
	min-width: 10ch;
	text-align: right;
}

/* -------------------------------------------------------------------------
 * 5. Document layout
 * ---------------------------------------------------------------------- */

.eos-wallpaper,
.eos-menubar,
.eos-icons,
.eos-windows,
.eos-phone {
	display: none;
}

/*
 * The wallpaper is painted here rather than in either shell: both stand on it,
 * and it should not be written down twice. Each shell turns it on — it stays
 * hidden above, so a viewport neither shell claims, or a shell that never
 * started, is left with the plain background the document reads best on.
 */
.js .eos-wallpaper {
	position: fixed;
	inset: 0;
	z-index: 0;
	background:
		radial-gradient(circle at 22% 32%, var(--blob1), transparent 42%),
		radial-gradient(circle at 76% 22%, var(--blob2), transparent 40%),
		radial-gradient(circle at 62% 88%, var(--blob3), transparent 44%),
		radial-gradient(circle at 5% 90%, var(--blob4), transparent 38%),
		var(--bg);
}

/* The faint graph-paper grid, hinting at a key lattice. */
.js .eos-wallpaper::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(var(--grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--grid) 1px, transparent 1px);
	background-size: 48px 48px;
}

.eos-pageheader,
.eos-doc,
.eos-pagefooter,
.eos-widgets,
.eos-dock {
	max-width: 74ch;
	margin-inline: auto;
	padding-inline: 24px;
}

.eos-pageheader {
	padding-top: 56px;
}

.eos-pageheader__name {
	margin: 0;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -.02em;
}

.eos-pageheader__tagline {
	margin: 4px 0 0;
	color: var(--muted);
}

.eos-pagefooter {
	margin-top: 40px;
	padding-block: 40px 64px;
	color: var(--muted2);
	font-size: 13px;
	border-top: 1px solid var(--line3);
}

.eos-app {
	padding-block: 36px;
	border-top: 1px solid var(--line3);
	scroll-margin-top: 24px;
}

.eos-app:first-child {
	border-top: 0;
}

.eos-app__title {
	margin: 0 0 18px;
	font-size: 22px;
	font-weight: 700;
}

.eos-subhead {
	margin: 26px 0 10px;
	font: 600 10.5px var(--mono);
	letter-spacing: .06em;
	color: var(--muted2);
	text-transform: uppercase;
}

/* -------------------------------------------------------------------------
 * 6. Content primitives
 * ---------------------------------------------------------------------- */

.eos-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 22px;
}

.eos-list--grid {
	gap: 16px;
}

.eos-record {
	margin: 0;
}

.eos-record--card {
	padding: 16px 18px;
	border: 1px solid var(--line4);
	border-radius: 14px;
	background: var(--surface3);
}

.eos-record__meta {
	margin: 0 0 6px;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.eos-record__title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
}

.eos-record__sub {
	margin: 3px 0 0;
	color: var(--muted);
	font-size: 13.5px;
}

.eos-record__summary {
	margin: 8px 0 0;
	color: var(--ink2);
	font-size: 14px;
}

.eos-record__links {
	margin: 12px 0 0;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.eos-record__badge img,
.eos-record__cover img,
.eos-post__cover img {
	border-radius: 10px;
	margin-bottom: 12px;
}

.eos-record__badge img {
	width: 72px;
	border-radius: 50%;
}

.eos-record__mark {
	display: block;
	width: 16px;
	height: 16px;
	margin-bottom: 10px;
	border-radius: 3px;
	background: var(--accent);
	transform: rotate(45deg);
}

.eos-bullets {
	margin: 10px 0 0;
	padding-left: 18px;
	display: grid;
	gap: 6px;
	color: var(--ink2);
	font-size: 14px;
}

.eos-facts {
	margin: 10px 0 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 14px;
	font-size: 13px;
}

.eos-facts dt {
	font: 600 10.5px var(--mono);
	letter-spacing: .04em;
	color: var(--muted2);
	text-transform: uppercase;
	align-self: center;
}

.eos-facts dd {
	margin: 0;
	color: var(--ink2);
}

.eos-chips {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.eos-chip {
	font: 500 11.5px var(--mono);
	padding: 3px 8px;
	border-radius: 7px;
	background: var(--surface4);
	color: var(--ink2);
	border: 1px solid var(--line3);
}

.eos-badge {
	font: 600 9.5px var(--mono);
	letter-spacing: .06em;
	padding: 3px 7px;
	border-radius: 6px;
	background: var(--surface4);
	color: var(--muted);
	text-transform: uppercase;
}

.eos-badge--accent {
	background: var(--accent-tint);
	color: var(--accent-text);
}

.eos-button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 32px;
	padding: 0 14px;
	border-radius: 9px;
	background: var(--accent);
	color: #fff;
	font-weight: 600;
	font-size: 12.5px;
	text-decoration: none;
	border: 0;
}

.eos-button:hover {
	filter: brightness(1.1);
	color: #fff;
}

.eos-button--quiet {
	background: var(--surface);
	color: var(--ink);
	border: 1px solid var(--line5);
}

.eos-button--quiet:hover {
	background: var(--surface4);
	color: var(--ink);
	filter: none;
}

.eos-tiles {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.eos-tile {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 12px 14px;
	border: 1px solid var(--line4);
	border-radius: 12px;
	background: var(--surface3);
}

.eos-tile__mark {
	flex: none;
	width: 28px;
	height: 28px;
	border-radius: 8px;
	background: linear-gradient(160deg, #2d7a87, var(--accent));
}

.eos-tile__title {
	display: block;
	font-size: 14px;
}

.eos-tile__blurb {
	display: block;
	margin-top: 2px;
	color: var(--muted);
	font-size: 13px;
}

.eos-about__photo {
	margin-bottom: 14px;
}

.eos-about__photo img {
	width: 96px;
	height: 96px;
	border-radius: 24px;
	object-fit: cover;
	border: 1px solid var(--line4);
}

.eos-about__headline {
	margin: 0;
	color: var(--accent-text);
	font-weight: 600;
	font-size: 15px;
}

.eos-prose {
	margin-top: 14px;
	color: var(--ink2);
}

.eos-prose > :first-child {
	margin-top: 0;
}

.eos-post__title {
	margin: 0 0 12px;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -.025em;
}

.eos-empty,
.eos-note {
	margin: 0;
	color: var(--muted);
	font-size: 13.5px;
}

.eos-empty code,
.eos-note code {
	font-size: 12px;
	padding: 2px 5px;
	border-radius: 5px;
	background: var(--code);
}

.eos-terminal__screen {
	margin: 0;
	padding: 16px 18px;
	border-radius: 12px;
	background: #141a1e;
	color: #d6e0e3;
	font-size: 12.5px;
	line-height: 1.6;
	overflow-x: auto;
}

.eos-terminal__prompt {
	color: #8fd6de;
}

.eos-terminal__out {
	color: #a9b6bb;
}

.eos-terminal .eos-note {
	margin-top: 10px;
}

.eos-contact__lede {
	margin: 0 0 14px;
	color: var(--ink2);
}

/* -------------------------------------------------------------------------
 * 7. Widgets
 *
 * On the desktop these are the glass panels down the right-hand side; here
 * they are a plain aside under the content, with the same markup. Everything
 * in them is rendered by the server, so this is complete on its own.
 * ---------------------------------------------------------------------- */

.eos-widgets {
	display: grid;
	gap: 20px;
	margin-top: 44px;
	margin-bottom: 28px;
	padding-top: 32px;
	border-top: 1px solid var(--line3);
}

.eos-widget__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}

.eos-widget__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 13px;
	font-weight: 600;
}

.eos-widget__mark {
	display: grid;
	place-items: center;
	flex: none;
	width: 18px;
	height: 18px;
	border-radius: 5px;
	background: var(--accent);
}

.eos-widget__mark--grid {
	grid-template-columns: 4px 4px;
	gap: 2px;
	place-content: center;
}

.eos-widget__mark--grid span {
	width: 4px;
	height: 4px;
	border-radius: 1px;
	background: #fff;
}

.eos-widget__mark--dot::after {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #fff;
}

.eos-widget__source {
	font-size: 10px;
	color: var(--muted);
}

.eos-widget__rows {
	display: flex;
	flex-direction: column;
}

.eos-widget__post {
	display: block;
	padding: 8px 0;
	border-top: 1px solid var(--line4);
	color: inherit;
	text-decoration: none;
}

.eos-widget__postrow {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.eos-widget__posttitle {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}

.eos-widget__postdate {
	font-size: 10.5px;
	color: var(--muted);
	white-space: nowrap;
}

.eos-widget__postexcerpt {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 3px;
	font-size: 12px;
	line-height: 1.4;
	color: var(--ink3);
}

.eos-widget__project {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 0;
	border-top: 1px solid var(--line4);
	color: inherit;
	text-decoration: none;
}

.eos-widget__thumb {
	flex: none;
	width: 44px;
	height: 32px;
	overflow: hidden;
	border: 1px solid var(--line3);
	border-radius: 6px;
	background: repeating-linear-gradient(135deg, var(--stripe1) 0 5px, var(--stripe2) 5px 10px);
}

.eos-widget__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.eos-widget__projecttext {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.eos-widget__projecttitle {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.eos-widget__projectmeta {
	font-size: 10px;
	letter-spacing: .04em;
	color: var(--muted);
}

.eos-widget__empty {
	margin: 0;
	padding: 18px 0 8px;
	text-align: center;
	font-size: 12px;
	color: var(--muted);
}

.eos-stats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}

.eos-stat {
	padding: 9px 12px;
	border: 1px solid var(--line4);
	border-radius: 14px;
	background: var(--surface3);
}

.eos-stat__value {
	display: block;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1;
	color: var(--accent-text);
	font-variant-numeric: tabular-nums;
}

.eos-stat__label {
	display: block;
	margin-top: 5px;
	font: 500 10px var(--mono);
	letter-spacing: .02em;
	color: var(--muted);
}

.eos-currently {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.eos-currently__row {
	display: grid;
	grid-template-columns: 82px 1fr;
	gap: 8px;
	align-items: baseline;
}

.eos-currently__label {
	font-size: 10.5px;
	letter-spacing: .02em;
	color: var(--muted);
}

.eos-currently__value {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.35;
}

/* -------------------------------------------------------------------------
 * 8. The dock, as a plain nav
 *
 * os.css turns this into the dock. Here it is simply the site's navigation,
 * which is what it has to be when scripts do not run.
 * ---------------------------------------------------------------------- */

.eos-dock {
	padding-top: 8px;
}

.eos-dock__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
}

.eos-dock__dot {
	display: none;
}

.eos-dock__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: var(--ink2);
	font-size: 14px;
}

.eos-dock__link:hover {
	color: var(--accent-text);
}

.eos-dock__tile {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: var(--tile-grad);
	color: var(--tile-ink);
	box-shadow: inset 0 0 0 1px var(--line4);
}

.eos-dock__link--accent .eos-dock__tile {
	background: linear-gradient(160deg, #2d7a87, var(--accent));
	color: #fff;
	--tile-bg: #1f5f6b;
}

.eos-dock__link--dark .eos-dock__tile {
	background: linear-gradient(160deg, #243036, #121a1e);
	color: #fff;
	--tile-bg: #1a2228;
}

.eos-dock__glyph {
	width: 15px;
	height: 15px;
}