From 565deccd2568cab98d165a8b41623c9b4ac7bf81 Mon Sep 17 00:00:00 2001
From: LucaP <luca.pislaru@protonmail.com>
Date: Sat, 10 Oct 2026 19:00:08 +0300
Subject: [PATCH] feat: chapter openers on phones and a roadside avatar at the
 destination

---
 src/styles/route.css | 34 ++++++++++++++++++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/styles/route.css b/src/styles/route.css
index cb5d2ea..980eb11 100644
--- a/src/styles/route.css
+++ b/src/styles/route.css
@@ -6,8 +6,8 @@
    or an aria-label, so the semantic document is unchanged. Imported after
    wayfinding.css, before print.css. */
 
-/* ---------- Chapter openers over the road (tablet and up) ---------- */
-@media screen and (min-width: 768px) {
+/* ---------- Chapter openers over the road ---------- */
+@media screen {
   .reading-stage .portfolio-section {
     margin-block: clamp(220px, 44vh, 480px) 0;
     padding-block-end: clamp(150px, 20vh, 230px);
@@ -118,7 +118,37 @@
   }
 }
 
+/* Phones: the same opener, scaled to the column; the chapter gap stays
+   long enough to see the road between chapters. */
+@media screen and (max-width: 767px) {
+  .reading-stage .portfolio-section {
+    margin-block: clamp(120px, 24vh, 220px) 0;
+    padding-block-end: clamp(40px, 8vh, 80px);
+  }
+  .reading-stage .portfolio-section:not([data-layout='project-stage']) {
+    padding-block-start: 2.6rem;
+  }
+  .reading-stage :is(.portfolio-section, .project-stage__lead) > h2 {
+    font-size: clamp(42px, 12.5vw, 64px);
+  }
+  .reading-stage .chapter-body {
+    padding: clamp(20px, 5.5vw, 28px);
+  }
+}
+@media screen and (min-width: 521px) and (max-width: 767px) {
+  .reading-stage .portfolio-section {
+    padding-block-end: 130px;
+  }
+}
+
 /* ---------- Destination: the ending is a place, not a small card ---------- */
+@media screen {
+  /* The avatar stands at the roadside beside the heading, above the panel. */
+  .reading-stage #contact .contact-avatar {
+    inset-block: auto calc(100% + 14px);
+    inset-inline-end: clamp(12px, 3vw, 40px);
+  }
+}
 @media screen and (min-width: 768px) {
   .reading-stage .portfolio-section[data-layout='destination'] {
     inline-size: min(900px, 64%);