/* Homepage, 2026.
   The page is a sheet from the notebook:
     left margin  = time (tenures, dates, years)
     text column  = what I'd say out loud (Copernicus)
     right margin = asides, in pen (Nanum Pen, blue)
   Sharp is for names and heads. Green is the brand: the JB mark and link underlines. */

@font-face { font-family: Copernicus; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/CopernicusWeb-Book.woff") format("woff"); }
@font-face { font-family: Copernicus; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/CopernicusWeb-BookItalic.woff") format("woff"); }
@font-face { font-family: Copernicus; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/Copernicus-Semibold.woff2") format("woff2"), url("../fonts/Copernicus-Semibold.woff") format("woff"); }
@font-face { font-family: Sharp; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/SharpSansNo1-Bold.woff") format("woff"); }
@font-face { font-family: InterVariable; font-weight: 100 900; font-style: normal; font-display: swap; src: url("../fonts/InterVariable.woff2") format("woff2"); }
@font-face { font-family: Pen; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/NanumPenScript-Regular.woff") format("woff"); }

:root {
	--paper: #ffffff;
	--ink: #2b2b2b;
	--soft: #6b6b6b;      /* subtitles, time */
	--brand: #47dd8e;     /* JB green */
	--brand-wash: #47dd8e40;
	--pen: #4a4a4a;       /* pen notes: graphite, not blue */

	--serif: Copernicus, Georgia, serif;
	--sharp: Sharp, "Helvetica Neue", Arial, sans-serif;
	--hand: Pen, "Bradley Hand", cursive;
	--sans: InterVariable, Inter, -apple-system, "Helvetica Neue", Arial, sans-serif;

	--body: 1.094rem;     /* 17.5px phone */
	--lede: 1.375rem;     /* 22px */
	--head: 1.5rem;       /* 24px */
	--measure: 34em;
	--gutter: 22px;
	--time-col: 0px;
	--note-col: 0px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font: 400 var(--body)/1.58 var(--serif);
	font-kerning: normal;
	-webkit-font-smoothing: antialiased;
	hanging-punctuation: first allow-end;
	padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px));
}
p, ul, ol, h1, h2, blockquote, figure { margin: 0; padding: 0; }
p { text-wrap: pretty; }
img { display: block; }

/* Links: a green pen line that floods into a highlighter on hover. */
a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--brand);
	text-decoration-thickness: 0.09em;
	text-underline-offset: 0.17em;
	text-decoration-skip-ink: auto;
	background: linear-gradient(var(--brand-wash), var(--brand-wash)) 0 92% / 100% 0 no-repeat;
	transition: background-size 160ms ease-out;
}
a:hover { background-size: 100% 0.62em; }
a:focus-visible { outline: 2px solid var(--pen); outline-offset: 2px; border-radius: 2px; }
@media (prefers-reduced-motion: reduce) { a { transition: none; } }

/* The sheet */
.sheet { max-width: calc(var(--measure) + var(--time-col) + var(--note-col)); margin-inline: auto; padding-left: var(--time-col); padding-right: var(--note-col); }
.home-mark { display: block; width: 38px; margin: 24px 0 0 calc(26px - var(--gutter)); background: none; }
.home-mark img { width: 38px; height: 38px; }

/* Sharp sits smaller than Copernicus at the same size (caps 73 vs 78 units, measured), so it is sized up to match. */
.name { font-family: var(--sharp); font-weight: 700; font-size: 1.07em; letter-spacing: -0.005em; line-height: 1; }
h2 {
	font-family: var(--sharp);
	font-weight: 700;
	font-size: var(--head);
	line-height: 1.15;
	letter-spacing: -0.022em;
	margin: 3.4em 0 0.9em;
}

/* Time: a lead-in on phones, hung in the left margin on wide screens. */
.t { display: none; font-size: 0.82em; line-height: 1.3; color: var(--soft); font-variant-numeric: oldstyle-nums; }
.ti { white-space: nowrap; }
.d { margin-left: 0.1em; font-size: 0.82em; color: var(--soft); white-space: nowrap; font-variant-numeric: oldstyle-nums; }

/* Pen notes */
.note {
	font-family: var(--hand);
	color: var(--pen);
	font-size: 1.42em;
	line-height: 1.02;
	letter-spacing: 0.005em;
	padding-left: 1.1em;
	transform: rotate(-1.2deg);
	transform-origin: 0 50%;
	text-wrap: balance;
}
.note a { text-decoration-color: currentColor; text-decoration-thickness: 1px; }

/* Intro */
.intro { padding-top: 48px; }
.portrait { width: 76px; height: 76px; border-radius: 50%; margin-bottom: 22px; filter: grayscale(1); }
.lede { font-size: var(--lede); line-height: 1.36; letter-spacing: -0.008em; }
.contact { margin-top: 1.25rem; font-size: 0.86rem; line-height: 1.55; color: var(--soft); letter-spacing: 0.005em; }
.contact a { text-decoration-thickness: 1px; }
a#email { unicode-bidi: bidi-override; direction: rtl; }

/* Career */
.career > p + p { margin-top: 0.95em; }
.career .note { margin: 1.15em 0; }
.career strong { font-weight: 600; }

/* Entries (notebook, articles) */
/* Phones: a real list of real links — hollow bullets, underlined titles, the date trailing the line. */
.entries { list-style: circle outside; padding-left: 1.15em; }
.entries li::marker { color: #a3a3a3; }
.entries li { text-wrap: pretty; }
.entries li + li { margin-top: 0.7em; }
.entries a { text-decoration: none; background: none; }
.entries .title { text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 0.09em; text-underline-offset: 0.17em; }
.entries a:hover .title { background: var(--brand-wash); }
.entries .sub { font-style: italic; color: var(--soft); font-size: 0.92em; line-height: 1.45; }
.entries .sub::before { content: "\A"; white-space: pre; }
.articles .entries li + li { margin-top: 0.45em; }
.venue { font-family: var(--sharp); font-weight: 700; font-size: 1em; letter-spacing: -0.012em; line-height: 1.2; margin: 2em 0 0.6em; }

/* Articles: a crisp sans link list — Inter's kerning and variable weight hold up better than
   small Title Case Copernicus. Always underlined in JB green so they read as links. */
.articles .entries { font-family: var(--sans); font-size: 0.86em; font-weight: 430; letter-spacing: -0.011em; line-height: 1.45; font-feature-settings: "kern", "cv11"; }
.articles .entries li + li { margin-top: 0.55em; }
.articles .entries .title { text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 1.5px; text-underline-offset: 0.22em; }
.articles .entries .d, .articles .t { font-variant-numeric: tabular-nums; }
h2 + .venue { margin-top: 0; }

/* Footer */
footer {
	margin: 9rem calc(-1 * max(var(--gutter), env(safe-area-inset-left, 0px))) 0;
	padding: 0 var(--gutter) 48px;
	min-height: 440px;
	display: flex; flex-direction: column; align-items: center; text-align: center;
	background: linear-gradient(180deg, #fff 45%, #d6f8e5 100%);
}
footer blockquote { font-style: italic; font-size: var(--lede); line-height: 1.32; max-width: 15em; text-wrap: balance; }
footer .by { margin-top: 0.6em; color: var(--soft); font-size: 0.9em; }
footer .updated { margin-top: 2.2em; color: var(--soft); font-size: 0.82em; }
footer .home-mark { margin: auto 0 0; padding-top: 110px; width: 56px; }
footer .home-mark img { width: 56px; height: 56px; }

/* Tablet and up: bigger type, time hangs in the left margin. */
@media (min-width: 760px) {
	:root { --body: 1.219rem; --lede: 1.75rem; --head: 1.875rem; --gutter: 32px; --time-col: 7.5rem; }
	.intro { padding-top: 88px; }
	.portrait { float: left; width: 96px; height: 96px; margin: 0.15em 0 0 calc(-1 * var(--time-col)); }
	.ti, .d { display: none; }
	.entries { list-style: none; padding-left: 0; }
	.entries li + li { margin-top: 1.05em; }
	.articles .entries li + li { margin-top: 0.5em; }
	.entries .title { display: block; text-decoration: none; }
	.entries a:hover .title { background: none; text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 0.09em; text-underline-offset: 0.17em; }
	.entries .sub { display: block; }
	.entries .sub::before { content: none; }
	.articles .entries li + li { margin-top: 0.6em; }
	.articles .entries .title { text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 1.5px; text-underline-offset: 0.22em; }
	.articles .t { font-size: 0.9em; padding-top: 0.12em; }
	.t {
		display: block;
		float: left;
		width: var(--time-col);
		margin-left: calc(-1 * var(--time-col));
		padding-right: 1.6rem;
		text-align: right;
		margin-bottom: 0;
		padding-top: 0.22em;
	}
}

/* Wide: the asides move into the right margin, in pen, beside where they fall in the story.
   Absolutely positioned at their static spot; a tiny script nudges any that would overlap. */
@media (min-width: 1180px) {
	:root { --note-col: 18rem; }
	.career { position: relative; }
	.career .note {
		position: absolute;
		right: calc(-1 * var(--note-col));
		width: calc(var(--note-col) - 2.75rem);
		margin: 0.1em 0 0;
		padding: 0;
		font-size: 1.2em;
		line-height: 1;
		transform: rotate(-2deg);
	}
}