diff --git a/calendarium/templates/readings.html b/calendarium/templates/readings.html
index b3a1735..629cb79 100644
--- a/calendarium/templates/readings.html
+++ b/calendarium/templates/readings.html
@@ -148,4 +148,13 @@ <h2>{{ reading.title }}</h2>
 		{% endif %}
 	</section>
 	</div>
+
+	{# The same day links again at the foot of the page, for phones (see main.css), where a day runs to several screens. show:window:top brings the new day up from its start. #}
+	{% url "readings" tradition=tradition cal=cal year=previous_date.year month=previous_date.month day=previous_date.day as previous_url %}
+	{% url "readings" tradition=tradition cal=cal year=next_date.year month=next_date.month day=next_date.day as next_url %}
+	<nav class="day-nav bottom-day-nav" aria-label="Other days">
+		<a class="cal-nav" href="{{ previous_url }}" {% if previous_nofollow %}rel="nofollow"{% endif %} hx-get="{{ previous_url }}" hx-select="#orthocal-content" hx-target="#orthocal-content" hx-swap="outerHTML transition:true show:window:top" hx-push-url="true">&larr; Previous Day</a>
+		<a class="cal-nav" href="{% url "index" %}" hx-get="{% url "index" %}" hx-select="#orthocal-content" hx-target="#orthocal-content" hx-swap="outerHTML transition:true show:window:top" hx-push-url="true">Today</a>
+		<a class="cal-nav" href="{{ next_url }}" {% if next_nofollow %}rel="nofollow"{% endif %} hx-get="{{ next_url }}" hx-select="#orthocal-content" hx-target="#orthocal-content" hx-swap="outerHTML transition:true show:window:top" hx-push-url="true">Next Day &rarr;</a>
+	</nav>
 {% endblock %}
diff --git a/orthocal/static/main.css b/orthocal/static/main.css
index a44ed69..ac0f762 100644
--- a/orthocal/static/main.css
+++ b/orthocal/static/main.css
@@ -569,6 +569,83 @@ a.active {
         flex-wrap: wrap;
     }
 }
+/* The second row of day links at the foot of the readings page is for
+   phones only (below). */
+.bottom-day-nav {
+    display: none;
+}
+/* Phones: the day/month links become full-width buttons at least 44px tall
+   (Apple's minimum tap target), and the toggles get 16px text, below which
+   iOS Safari zooms the page when a <select> is tapped. */
+@media (max-width: 600px) {
+    /* The title row above shares the nav's gutter, so the title, the
+       hamburger and its menu line up with the buttons' edges. The column
+       gap and the nav's negative margin (1.5em each, but at different font
+       sizes) otherwise leave the hamburger 3px past the gutter. */
+    .topbar-inner {
+        width: auto;
+        padding-left: 16px;
+        padding-right: 16px;
+        column-gap: 0;
+    }
+    .topbar-inner > nav {
+        margin-left: 0;
+    }
+    .topbar-inner > nav > ul {
+        right: 16px;
+    }
+    nav.page-nav {
+        width: auto;
+        padding: 0.5em 16px;
+        font-size: 0.85rem;
+    }
+    .page-nav-row {
+        flex-direction: column;
+        align-items: stretch;
+    }
+    .day-nav {
+        flex-wrap: wrap;
+        gap: 0.5rem;
+    }
+    .bottom-day-nav {
+        display: flex;
+        margin-top: 2.5em;
+        font-family: var(--font-sans);
+        font-size: 0.85rem;
+    }
+    .bottom-day-nav a.cal-nav:link, .bottom-day-nav a.cal-nav:visited {
+        color: var(--color-text-muted);
+        text-decoration: none;
+    }
+    nav.page-nav a.cal-nav, .bottom-day-nav a.cal-nav {
+        flex: 1 1 auto;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 44px;
+        box-sizing: border-box;
+        margin: 0;
+        padding: 0 0.6em;
+        white-space: nowrap;
+        border: 1px solid var(--color-border-input);
+        border-radius: 6px;
+        background-color: var(--color-bg-input);
+    }
+    .toggle-row {
+        justify-content: stretch;
+    }
+    .toggle-picker {
+        flex: 1 1 0;
+    }
+    /* nav.page-nav outranks the base .toggle-picker select rule below,
+       which sets font-size: inherit. */
+    nav.page-nav .toggle-picker select {
+        width: 100%;
+        min-height: 44px;
+        font-size: 16px;
+        border-radius: 6px;
+    }
+}
 
 /* ==========================================================================
    Main content shell
@@ -579,6 +656,15 @@ main#orthocal {
     min-height: 100%;
     container-type: inline-size;
 }
+/* Phones: the same 16px gutter as the topbar, rather than 75% of an
+   already narrow screen. */
+@media (max-width: 600px) {
+    main#orthocal {
+        width: auto;
+        margin-left: 16px;
+        margin-right: 16px;
+    }
+}
 main#orthocal p {
     text-indent: 1.5em;
     margin-top: 0;
@@ -802,6 +888,12 @@ section.readings h2 {
     -ms-hyphens: auto;
     hyphens: auto;
 }
+/* On a phone's narrow column, justifying opens wide gaps between words. */
+@media (max-width: 600px) {
+    #content, .passage {
+        text-align: left;
+    }
+}
 .passage h2 {
     margin-top: 0;
 	font-size: 1.1em;
@@ -998,6 +1090,67 @@ p.day-number {
 	font-size: 1.5em;
 }
 
+/* Phones: a seven-column grid sized in vw leaves 40px cells with 4-7px text,
+   so the month becomes a list of days instead, one per row. This is CSS
+   only: the oEmbed API hands this same table HTML to other sites, which
+   style it themselves. The weekday names are English, like the header row
+   they replace (Python's calendar module writes that). */
+@media (max-width: 600px) {
+	table.month {
+		font-size: 1.2em;
+		width: 100%;
+		margin: 1em 0;
+	}
+	table.month,
+	table.month tbody,
+	table.month tr,
+	table.month tr:first-child th,
+	table.month td {
+		display: block;
+		width: auto;
+	}
+	/* The weekday header row, and the blank cells padding the first and
+	   last weeks. */
+	table.month tr:nth-child(2),
+	table.month td.noday {
+		display: none;
+	}
+	table.month td {
+		border-width: 0 0 1px 0;
+	}
+	table.month td a {
+		padding: 0.6em 1em;
+	}
+	table.month tr td p {
+		margin-bottom: 0.3em !important;
+	}
+	table.month ul {
+		margin-bottom: 0.3em;
+	}
+	table.month li + li:before {
+		padding: 0 0.4em;
+	}
+	table.month ul.saints li {
+		font-size: 0.85em;
+	}
+	p.day-number {
+		font-size: 1.3em;
+		font-weight: bold;
+	}
+	td.sun p.day-number::after { content: " Sunday"; }
+	td.mon p.day-number::after { content: " Monday"; }
+	td.tue p.day-number::after { content: " Tuesday"; }
+	td.wed p.day-number::after { content: " Wednesday"; }
+	td.thu p.day-number::after { content: " Thursday"; }
+	td.fri p.day-number::after { content: " Friday"; }
+	td.sat p.day-number::after { content: " Saturday"; }
+	td p.day-number::after {
+		font-size: 0.7em;
+		font-weight: normal;
+		color: var(--color-text-secondary);
+	}
+}
+
 /* ==========================================================================
    Saint search page
    ========================================================================== */