* { box-sizing: border-box; }

:root {
	--ink: #1b1b1b;
	--muted: #555;
	--link: #0b57d0;
	--max: 65ch;
	--bg: #f7f3ea;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
	"Liberation Mono", "Courier New", monospace;
	font-size: 16px;
	line-height: 1.6;
}

main {
	max-width: var(--max);
	margin: clamp(2rem, 6vh, 6rem) auto;
	padding: 0 1.25rem 35vh;
}

.photo-frame {
	width: 100%;
	max-width: var(--max);   /* stays within 65ch column */
	aspect-ratio: 1 / 1;
	background: var(--bg);
	overflow: hidden;        /* <-- this clips the blur */
}

.photo {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.blur-up {
	filter: blur(10px);
}

.blur-up.is-loaded {
	animation: blur-reveal 750ms cubic-bezier(0.4, 0, 1, 1) forwards;
}

@keyframes blur-reveal {
	0%   { filter: blur(12px); }
	30%  { filter: blur(11px); } /* very slow start */
	60%  { filter: blur(7px); }  /* acceleration begins */
	85%  { filter: blur(2px); }  /* fast finish */
	100% { filter: blur(0); }
}

h1, h2 {
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 1rem 0;
}

p { margin: 0 0 1rem 0; }

a {
	color: var(--link);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.ns {
	margin-top: 1rem;
	padding: 0.75rem 1rem;
	background: var(--ink);   /* dark background */
	color: var(--bg);        /* match off-white */
	font-size: 0.9rem;
}


.ns p {
  margin: 0;
}

.ns a {
	color: var(--link);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}


hr {
	border: 0;
	border-top: 1px solid rgba(0,0,0,0.15);
	margin: 1.5rem 0;
}

ul {
	list-style: none;
	padding: 0;
	margin: 0 0 1rem 0;
}

li { margin: 0.25rem 0; }

.muted { color: var(--muted); }

footer {
	margin-top: 2rem;
	font-size: 0.9rem;
}