3 files changed, 71 insertions, 3 deletions

diff --git a/internal/web/templates/index.html b/internal/web/templates/index.html
index 4dd580f..03c0078 100644
--- a/internal/web/templates/index.html
+++ b/internal/web/templates/index.html
@@ -1,11 +1,13 @@
 {{/* index.html renders the full lectio-web page: top-bar controls (date,
-     lectionary, version checkboxes, all/gospel toggle, theme select), a
-     passage-lookup form, and the pre-rendered reading pane (#pane).
+     lectionary, version checkboxes, all/gospel toggle, display select,
+     theme select), a passage-lookup form, and the pre-rendered reading pane
+     (#pane).
 
      The controls form (#controls) carries hx-get="/readings" and fires on
      any "change" bubbling up from its fields (htmx auto-includes an
      hx-get element's enclosing form fields as the request's query
-     params -- no hx-include needed). The date +/- buttons are separate
+     params -- no hx-include needed), so "display" needs no extra wiring
+     beyond living inside #controls. The date +/- buttons are separate
      hx-get elements nested in the same form so their own field values are
      included too; they override "date" via hx-vals. The theme <select>
      has no server round trip: it swaps the #theme <link>'s href directly. */}}
@@ -48,6 +50,14 @@
         <option value="1" {{if .All}}selected{{end}}>wszystkie części</option>
       </select>
     </label>
+
+    <label>układ
+      <select name="display">
+        <option value="horizontal" {{if eq .Display "horizontal"}}selected{{end}}>poziomo</option>
+        <option value="vertical" {{if eq .Display "vertical"}}selected{{end}}>kolumny</option>
+        <option value="interlinear" {{if eq .Display "interlinear"}}selected{{end}}>interlinearnie</option>
+      </select>
+    </label>
   </form>
 
   <label class="theme-picker">motyw
diff --git a/internal/web/templates/readings-interlinear.html b/internal/web/templates/readings-interlinear.html
new file mode 100644
index 0000000..0ba7c02
--- /dev/null
+++ b/internal/web/templates/readings-interlinear.html
@@ -0,0 +1,29 @@
+{{/* readings-interlinear.html renders the reading pane fragment in
+     interlinear (verse-by-verse) layout: one <section> per liturgy.Section,
+     versions interleaved by chapter:verse -- each verse key printed once
+     (.vnum) inside a .ilverse block, followed by one .illine per version
+     that carries that verse, carrying its own .version-label + escaped
+     text. "pl" cannot participate (paragraph text has no verse numbers)
+     and was already substituted/dropped upstream; see
+     web.buildInterlinearViews. A section with nothing to interleave shows
+     .Note instead. */}}
+{{range .}}
+<section class="reading-section" data-part="{{.PartID}}">
+  <h2 class="heading">{{.Heading}}</h2>
+  {{if .Subtitle}}<p class="citation">{{.Subtitle}}</p>{{end}}
+  {{if .Note}}
+  <p class="error">{{.Note}}</p>
+  {{else}}
+  <div class="display-interlinear">
+    {{range .Verses}}
+    <div class="ilverse">
+      <span class="vnum">{{.VNum}}</span>
+      {{range .Lines}}
+      <div class="illine"><span class="version-label">{{.Label}}</span> <span>{{.Text}}</span></div>
+      {{end}}
+    </div>
+    {{end}}
+  </div>
+  {{end}}
+</section>
+{{end}}
diff --git a/internal/web/templates/readings-vertical.html b/internal/web/templates/readings-vertical.html
new file mode 100644
index 0000000..08f526d
--- /dev/null
+++ b/internal/web/templates/readings-vertical.html
@@ -0,0 +1,29 @@
+{{/* readings-vertical.html renders the reading pane fragment in vertical
+     (side-by-side columns) layout: one <section> per liturgy.Section, all
+     requested versions laid out in a .display-vertical grid, one .vcol per
+     version -- the browser equivalent of the CLI `compare` view. Data and
+     role classes (heading/citation/version-label/vnum/refrain) match
+     readings.html so theme CSS restyles both identically; base.css owns
+     the .display-vertical/.vcol layout. */}}
+{{range .}}
+<section class="reading-section" data-part="{{.PartID}}">
+  <h2 class="heading">{{.Heading}}</h2>
+  {{if .Subtitle}}<p class="citation">{{.Subtitle}}</p>{{end}}
+  <div class="display-vertical">
+    {{range .Columns}}
+    <div class="vcol">
+      <h3 class="version-label">{{.Label}}</h3>
+      {{range .Blocks}}
+        {{if .Refrain}}
+      <p class="block refrain">{{.Text}}</p>
+        {{else if .VNum}}
+      <p class="block verse"><span class="vnum">{{.VNum}}</span> {{.Text}}</p>
+        {{else}}
+      <p class="block">{{.Text}}</p>
+        {{end}}
+      {{end}}
+    </div>
+    {{end}}
+  </div>
+</section>
+{{end}}