diff --git a/index.html b/index.html
index f7ba564..cd3e6fe 100644
--- a/index.html
+++ b/index.html
@@ -52,16 +52,18 @@
 				<source srcset="./images/caesar-256.jpg 256w, ./images/caesar-128.jpg 128w" type="image/jpeg" />
 				<img class="profile u-photo photo" src="./images/caesar-128.jpg" width="128" height="128" alt="" />
 			</picture>
-			<h1 class="p-name fn">
-				<a class="u-url u-uid url" href="https://caesarschinas.com" rel="home canonical">
-					Caesar Schinas
-				</a>
+			<h1>
+				<ruby>
+					<a class="p-name fn u-url u-uid url" href="https://caesarschinas.com" rel="home canonical">
+						Caesar Schinas
+					</a>
+					<rt class="ipa p-ipa" lang="en-GB-fonipa" title="pronunciation (IPA)">
+						<a href="http://ipa-reader.xyz/?text=%CB%88si%CB%90z%C9%99%20%CB%88sk%C9%AAn%C9%99s&voice=Emma">
+							/ˈsiːzə ˈskɪnəs/
+						</a>
+					</rt>
+				</ruby>
 			</h1>
-			<p class="ipa p-ipa" lang="en-GB-fonipa">
-				<a href="http://ipa-reader.xyz/?text=%CB%88si%CB%90z%C9%99%20%CB%88sk%C9%AAn%C9%99s&voice=Emma">
-					/ˈsiːzə ˈskɪnəs/
-				</a>
-			</p>
 			<p class="dfn p-role">
 				Sailor;&nbsp; programmer;&nbsp; web developer;&nbsp; publisher.
 			</p>
diff --git a/style.css b/style.css
index 9a586cb..05ec6d1 100644
--- a/style.css
+++ b/style.css
@@ -2,6 +2,7 @@ html {
 	background: #eee;
 	color: #444;
 	font-family: "Gentium Basic", serif;
+	font-size: 16px;
 	min-height: 80%;
 	display: flex;
 	flex-flow: column;
@@ -12,7 +13,6 @@ body {
 	max-width: 30em;
 	margin: auto;
 	padding: 2em;
-	font-size: 16px;
 	line-height: 1.5em;
 }
 h1, p {
@@ -27,10 +27,10 @@ a:hover {
 	color: #08f;
 	border-bottom-color: #08f;
 }
-h1 a {
+h1 a.p-name {
 	border-bottom: none;
 }
-h1 a:hover {
+h1 a.p-name:hover {
 	color: inherit;
 	cursor: default;
 }
@@ -44,9 +44,16 @@ h1 {
 h1, .ipa, .dfn {
 	text-align: center;
 }
+ruby, rp, rt {
+	display: inline;
+	font: inherit;
+}
 .ipa {
+	display: block;
+	font-size: 1rem;
+	line-height: inherit;
 	color: #888;
-	margin: 0;
+	margin: 0 1em;
 	letter-spacing: 0.05em;
 }
 img.profile {
@@ -123,7 +130,7 @@ code {
 }
 
 @media (min-width: 400px) {
-	body {
+	html {
 		font-size: 18px;
 	}
 }
@@ -132,9 +139,6 @@ code {
 	h1 {
 		margin-right: 0.5em;
 	}
-	h1, .ipa {
-		display: inline-block;
-	}
 	h1, .ipa, .dfn {
 		text-align: left;
 	}
@@ -143,9 +147,12 @@ code {
 		margin: -0.5em 0em 0.5em 0.5em;
 		max-width: 20%;
 	}
+	.ipa {
+		display: inline;
+	}
 }
 @media (min-width: 800px) {
-	body {
+	html {
 		font-size: 20px;
 	}
 }