` block with:
+
+```twig
+
+ {% set hero = null %}
+ {% if page.header.hero_image and page.media[page.header.hero_image] is defined %}
+ {% set hero = page.media[page.header.hero_image] %}
+ {% elseif page.media.images|length > 0 %}
+ {% set hero = page.media.images|first %}
+ {% endif %}
+
+ {% if hero %}
+
+ .url }})
+
+ {% endif %}
+
+
+
+
+ {{ page.title }}
+
+
+```
+
+(Keep the `{% set weather_icons = ... %}` block at the top before `` — move it above the article element, not inside.)
+
+- [ ] **Step 2: Replace the Single entry + Gallery CSS sections**
+
+Find `/* ── Single entry ──` through the end of `/* ── Lightbox ──` section. Replace entirely with:
+
+```css
+/* ── Single entry ───────────────────────────────────────────────────────────── */
+
+.entry-hero {
+ width: 100%;
+ max-height: 480px;
+ overflow: hidden;
+ margin-bottom: var(--space-8);
+}
+
+.entry-hero img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ display: block;
+}
+
+.entry-header { margin-bottom: var(--space-8); }
+
+.entry-header-meta {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: var(--space-3);
+ margin-bottom: var(--space-4);
+}
+
+.entry-header .entry-date {
+ font-size: var(--text-sm);
+ font-weight: 600;
+ letter-spacing: 0.06em;
+ text-transform: uppercase;
+ color: var(--color-ink-muted);
+}
+
+.entry .entry-title {
+ font-family: var(--font-display);
+ font-size: var(--text-2xl);
+ font-weight: 400;
+ line-height: var(--leading-snug);
+ color: var(--color-ink);
+ margin-bottom: var(--space-4);
+}
+
+@media (min-width: 520px) {
+ .entry .entry-title { font-size: var(--text-3xl); }
+}
+
+.entry-title-rule {
+ height: 1px;
+ background: var(--color-border);
+ margin-bottom: var(--space-8);
+}
+
+.entry-body { margin-bottom: var(--space-10); }
+.entry-body p { margin-bottom: 1.1em; font-size: var(--text-md); line-height: var(--leading-normal); color: var(--color-ink-2); }
+.entry-body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
+
+.entry-footer { border-top: 1px solid var(--color-border); padding-top: var(--space-5); }
+.entry-footer a { color: var(--color-accent); text-decoration: none; font-size: var(--text-sm); font-weight: 500; }
+.entry-footer a:hover { color: var(--color-accent-hover); }
+
+/* ── Photo gallery ───────────────────────────────────────────────────────────── */
+
+.entry-gallery {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: 3px;
+ margin-bottom: var(--space-10);
+ border-radius: var(--radius-md);
+ overflow: hidden;
+}
+
+@media (min-width: 520px) {
+ .entry-gallery { grid-template-columns: repeat(3, 1fr); }
+}
+
+.gallery-thumb {
+ background: none;
+ border: none;
+ padding: 0;
+ cursor: pointer;
+ display: block;
+ aspect-ratio: 1;
+ overflow: hidden;
+}
+
+.gallery-thumb img {
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ display: block;
+ transition: opacity 0.15s;
+}
+
+.gallery-thumb:hover img,
+.gallery-thumb:focus img { opacity: 0.82; }
+
+.gallery-thumb:focus { outline: 2px solid var(--color-accent); outline-offset: 2px; }
+
+/* ── Lightbox ────────────────────────────────────────────────────────────────── */
+
+.lightbox {
+ position: fixed;
+ inset: 0;
+ background: rgba(0,0,0,0.94);
+ z-index: 1000;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.lightbox[hidden] { display: none; }
+
+.lightbox-img {
+ max-width: 92vw;
+ max-height: 90vh;
+ object-fit: contain;
+ border-radius: var(--radius-sm);
+ display: block;
+}
+
+.lightbox-close,
+.lightbox-prev,
+.lightbox-next {
+ position: absolute;
+ background: rgba(255,255,255,0.12);
+ border: none;
+ color: #fff;
+ cursor: pointer;
+ border-radius: 50%;
+ width: 44px;
+ height: 44px;
+ font-size: 1.4rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: background 0.15s;
+}
+
+.lightbox-close { top: 1rem; right: 1rem; }
+.lightbox-prev { left: 0.75rem; top: 50%; transform: translateY(-50%); }
+.lightbox-next { right: 0.75rem; top: 50%; transform: translateY(-50%); }
+.lightbox-close:hover,
+.lightbox-prev:hover,
+.lightbox-next:hover { background: rgba(255,255,255,0.26); }
+```
+
+- [ ] **Step 3: Move weather_icons to top of entry.html.twig**
+
+Ensure the `{% set weather_icons = {...} %}` block appears before ``, not inside the header block.
+
+- [ ] **Step 4: Verify entry page**
+
+Open any entry at `http://100.96.115.96:8081/tracker/`. Verify:
+- If entry has photos: full-width hero image at top, max-height 480px
+- Title in DM Serif Display, large, below the header meta
+- Thin rule under the title before body text
+- Body text at 18px, comfortable line height
+- Gallery grid below body (2-col / 3-col)
+- "← Back to journal" footer link in teal
+
+- [ ] **Step 5: Commit**
+
+```bash
+cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast/user
+git add themes/intotheeast/templates/entry.html.twig themes/intotheeast/css/style.css
+git commit -m "feat: redesign single entry page with hero image and display typography"
+```
+
+---
+
+### Task 6: Post form UX redesign
+
+**Files:**
+- Modify: `user/pages/02.post/post-form.md` (hide lat/lng from UI)
+- Modify: `user/themes/intotheeast/templates/post-form.html.twig`
+- Modify: `user/themes/intotheeast/css/style.css` (Post form section)
+
+**Interfaces:**
+- Consumes: Grav form plugin field rendering (inputs named `data[fieldname]`)
+- Produces: improved mobile posting form
+
+- [ ] **Step 1: Hide lat/lng inputs in post-form.md**
+
+In `user/pages/02.post/post-form.md`, add a `classes` key to the lat and lng field definitions so they can be hidden via CSS:
+
+Change the lat field from:
+```yaml
+ -
+ name: lat
+ label: Latitude
+ type: text
+ placeholder: 'tap "Get Location" below'
+```
+
+To:
+```yaml
+ -
+ name: lat
+ label: Latitude
+ type: text
+ placeholder: ''
+ classes: gps-hidden-field
+```
+
+Change the lng field from:
+```yaml
+ -
+ name: lng
+ label: Longitude
+ type: text
+ placeholder: ''
+```
+
+To:
+```yaml
+ -
+ name: lng
+ label: Longitude
+ type: text
+ placeholder: ''
+ classes: gps-hidden-field
+```
+
+Note: Grav form plugin applies the `classes` value to the field wrapper div. Verify this by inspecting the rendered form HTML after the change.
+
+- [ ] **Step 2: Update post-form.html.twig**
+
+Replace the entire content of `user/themes/intotheeast/templates/post-form.html.twig` with:
+
+```twig
+{% extends 'default.html.twig' %}
+
+{% block content %}
+
+ New Entry
+ {% include 'forms/form.html.twig' ignore missing %}
+
+
+
+
+
+
+
+
+
+
+{% endblock %}
+```
+
+- [ ] **Step 3: Replace the Post form CSS section**
+
+Find `/* ── Post form ──` in style.css. Replace it entirely with:
+
+```css
+/* ── Post form ──────────────────────────────────────────────────────────────── */
+
+.post-form-wrap h1 {
+ font-family: var(--font-display);
+ font-size: var(--text-xl);
+ font-weight: 400;
+ margin-bottom: var(--space-6);
+ color: var(--color-ink);
+}
+
+/* Hide GPS coordinate fields — filled by JS, not user-facing */
+.gps-hidden-field { display: none !important; }
+
+/* Grav form field wrappers */
+.form-field { margin-bottom: var(--space-5); }
+.form-label label {
+ display: block;
+ font-size: var(--text-sm);
+ font-weight: 600;
+ color: var(--color-ink);
+ margin-bottom: var(--space-2);
+}
+
+.form-field input[type="text"],
+.form-field input[type="email"],
+.form-field input[type="datetime-local"],
+.form-field textarea {
+ width: 100%;
+ font-family: var(--font-ui);
+ font-size: var(--text-base);
+ padding: 0.875rem 1rem;
+ border: 1px solid var(--color-border);
+ border-radius: var(--radius-md);
+ background: var(--color-canvas);
+ color: var(--color-ink);
+ min-height: 44px;
+ transition: border-color 0.15s;
+ -webkit-appearance: none;
+}
+
+.form-field input:focus,
+.form-field textarea:focus {
+ outline: 2px solid var(--color-accent);
+ outline-offset: 1px;
+ border-color: var(--color-accent);
+}
+
+.form-field textarea { resize: vertical; min-height: 160px; line-height: var(--leading-normal); }
+
+/* Submit button — Grav renders it as .btn or input[type=submit] */
+.form-actions input[type="submit"],
+.form-actions .btn,
+.form-actions button[type="submit"] {
+ display: block;
+ width: 100%;
+ padding: 1rem;
+ min-height: 52px;
+ background: var(--color-accent);
+ color: var(--color-accent-on);
+ border: none;
+ border-radius: var(--radius-md);
+ font-family: var(--font-ui);
+ font-size: var(--text-base);
+ font-weight: 600;
+ cursor: pointer;
+ transition: background 0.15s;
+ margin-top: var(--space-6);
+}
+
+.form-actions input[type="submit"]:hover,
+.form-actions button[type="submit"]:hover { background: var(--color-accent-hover); }
+
+/* Action buttons row (Get Location, Get Weather) */
+.form-action-row {
+ display: flex;
+ gap: var(--space-3);
+ margin-top: var(--space-5);
+}
+
+.btn-action {
+ flex: 1;
+ padding: 0.75rem var(--space-3);
+ min-height: 44px;
+ background: var(--color-canvas);
+ border: 1px solid var(--color-border);
+ border-radius: var(--radius-md);
+ font-family: var(--font-ui);
+ font-size: var(--text-sm);
+ font-weight: 500;
+ cursor: pointer;
+ color: var(--color-ink);
+ transition: background 0.15s, border-color 0.15s;
+}
+
+.btn-action:hover { background: var(--color-paper); border-color: var(--color-accent); }
+
+/* Status feedback lines */
+.form-status {
+ font-size: var(--text-sm);
+ color: var(--color-ink-muted);
+ margin-top: var(--space-2);
+ min-height: 1.4em;
+}
+
+.form-status--ok { color: var(--color-accent); }
+.form-status--err { color: #B44A2A; }
+```
+
+- [ ] **Step 4: Verify post form**
+
+Open `http://100.96.115.96:8081/post` (logged in). Verify:
+- Lat/lng inputs not visible (`.gps-hidden-field` hidden via CSS)
+- Inputs have rounded corners, proper padding, focus ring in teal
+- "Get Location" and "Get Weather" buttons side by side, same width
+- "Post Entry" (or whatever the submit label is) in teal, full-width
+- Tap "Get Location" → status line shows "✓ Location captured · lat, lng" in teal
+- Mobile at 375px: all inputs and buttons are thumb-friendly
+
+- [ ] **Step 5: Commit**
+
+```bash
+cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast/user
+git add pages/02.post/post-form.md themes/intotheeast/templates/post-form.html.twig themes/intotheeast/css/style.css
+git commit -m "feat: redesign post form — hide GPS fields, teal CTA, better mobile UX"
+```
+
+---
+
+### Task 7: Stats + map + mini-map styling
+
+**Files:**
+- Modify: `user/themes/intotheeast/templates/stats.html.twig`
+- Modify: `user/themes/intotheeast/css/style.css` (Map, Stats, Mini-map sections)
+
+**Interfaces:**
+- Produces: styled stats page and map page using design tokens
+
+- [ ] **Step 1: Update stats page heading**
+
+In `user/themes/intotheeast/templates/stats.html.twig`, replace the `` tag with:
+
+```twig
+
+ Trip Statistics
+```
+
+(Remove the inline `style` attribute from the existing h1.)
+
+- [ ] **Step 2: Replace Stats + Map + Mini-map CSS sections**
+
+Find `/* ── Map page ──` through end of `/* ── Mini-map on tracker feed ──`. Replace all three sections with:
+
+```css
+/* ── Map page ───────────────────────────────────────────────────────────────── */
+
+.map-page .site-main { max-width: none; padding: 0; }
+
+.map-container {
+ height: calc(100vh - var(--site-header-height));
+ width: 100%;
+}
+
+.map-empty {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 100%;
+ color: var(--color-ink-muted);
+ font-style: italic;
+}
+
+/* ── Stats page ─────────────────────────────────────────────────────────────── */
+
+.stats-heading {
+ font-family: var(--font-display);
+ font-size: var(--text-2xl);
+ font-weight: 400;
+ margin-bottom: var(--space-8);
+ color: var(--color-ink);
+}
+
+.stats-grid {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: var(--space-4);
+ margin-bottom: var(--space-8);
+}
+
+.stat-block {
+ background: var(--color-canvas);
+ border: 1px solid var(--color-border);
+ border-radius: var(--radius-md);
+ padding: var(--space-6) var(--space-5);
+ text-align: center;
+ box-shadow: var(--shadow-sm);
+}
+
+.stat-value {
+ display: block;
+ font-family: var(--font-display);
+ font-size: var(--text-3xl);
+ font-weight: 400;
+ color: var(--color-accent);
+ line-height: 1.1;
+ margin-bottom: var(--space-2);
+}
+
+.stat-label {
+ display: block;
+ font-size: var(--text-xs);
+ font-weight: 600;
+ color: var(--color-ink-muted);
+ text-transform: uppercase;
+ letter-spacing: 0.07em;
+}
+
+.stats-countries {
+ font-size: var(--text-sm);
+ color: var(--color-ink-2);
+ text-align: center;
+ line-height: 1.9;
+}
+
+.stats-countries-label {
+ font-weight: 600;
+ display: block;
+ margin-bottom: var(--space-2);
+ color: var(--color-ink);
+ text-transform: uppercase;
+ font-size: var(--text-xs);
+ letter-spacing: 0.07em;
+}
+
+.stats-note {
+ font-size: var(--text-xs);
+ color: var(--color-ink-muted);
+ text-align: center;
+ margin-top: var(--space-6);
+}
+
+/* ── Mini-map on tracker feed ────────────────────────────────────────────────── */
+
+.feed-map-wrap {
+ margin-bottom: var(--space-10);
+ border-radius: var(--radius-md);
+ overflow: hidden;
+ border: 1px solid var(--color-border);
+ box-shadow: var(--shadow-sm);
+}
+
+.feed-map {
+ height: 240px;
+ width: 100%;
+}
+
+@media (min-width: 520px) {
+ .feed-map { height: 300px; }
+}
+
+.feed-map-link {
+ display: block;
+ text-align: right;
+ font-size: var(--text-xs);
+ font-weight: 500;
+ color: var(--color-accent);
+ text-decoration: none;
+ padding: var(--space-2) var(--space-4);
+ background: var(--color-paper);
+ border-top: 1px solid var(--color-border);
+}
+
+.feed-map-link:hover { color: var(--color-accent-hover); }
+```
+
+- [ ] **Step 3: Update Leaflet marker colors**
+
+In `tracker.html.twig`, find the JS that sets marker colors. Update from `#0066cc` to `#1F6B5A` and from `#0044aa` to `#155244`:
+
+```js
+var color = isLatest ? '#155244' : '#1F6B5A';
+```
+
+Also update the polyline color:
+```js
+L.polyline(latLngs, { color: '#1F6B5A', weight: 3, opacity: 0.7 }).addTo(map);
+```
+
+Do the same in `map.html.twig` — update any hardcoded `#0066cc` colors to `#1F6B5A`.
+
+- [ ] **Step 4: Verify stats and map pages**
+
+Open `http://100.96.115.96:8081/stats`. Verify:
+- Heading in DM Serif Display
+- Numbers in DM Serif Display, teal color
+- Stat cards on warm white background with subtle shadow
+- Labels uppercase, muted gray
+
+Open `http://100.96.115.96:8081/map`. Verify:
+- Map fills viewport below header
+- Markers are teal circles
+- Route line is teal
+- No horizontal scroll or layout issues
+
+- [ ] **Step 5: Commit**
+
+```bash
+cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast/user
+git add themes/intotheeast/templates/stats.html.twig themes/intotheeast/templates/tracker.html.twig themes/intotheeast/templates/map.html.twig themes/intotheeast/css/style.css
+git commit -m "feat: apply design tokens to stats, map, and mini-map"
+```
+
+---
+
+### Task 8: Mobile polish + reduced motion + final QA
+
+**Files:**
+- Modify: `user/themes/intotheeast/css/style.css` (add responsive + motion CSS)
+
+**Interfaces:**
+- Produces: fully responsive, accessible design at 320px–1440px viewport widths
+
+- [ ] **Step 1: Add reduced-motion support**
+
+At the bottom of `style.css`, append:
+
+```css
+/* ── Accessibility ───────────────────────────────────────────────────────────── */
+
+@media (prefers-reduced-motion: reduce) {
+ *,
+ *::before,
+ *::after {
+ animation-duration: 0.01ms !important;
+ animation-iteration-count: 1 !important;
+ transition-duration: 0.01ms !important;
+ }
+}
+
+/* Keyboard focus ring: visible on all interactive elements */
+:focus-visible {
+ outline: 2px solid var(--color-accent);
+ outline-offset: 2px;
+}
+```
+
+- [ ] **Step 2: Verify header on 320px (smallest phone)**
+
+Set browser devtools to 320px viewport. Verify:
+- Site title and nav links both visible and not overlapping
+- If title overflows, add this to style.css:
+ ```css
+ @media (max-width: 380px) {
+ .site-title { font-size: var(--text-md); }
+ .site-nav a { padding: var(--space-2); font-size: 0.8rem; }
+ }
+ ```
+
+- [ ] **Step 3: Verify post form on mobile**
+
+On a real phone (or devtools 375px), open `/post` and verify:
+- Inputs do not trigger zoom on focus (font-size is 1rem ≥ 16px — already set)
+- "Post Entry" button is thumb-reachable (full-width, 52px min height)
+- Get Location / Get Weather buttons are side-by-side, each at least 44px tall
+- Status feedback visible after tapping location/weather
+
+- [ ] **Step 4: Cross-page smoke test checklist**
+
+Check each of these manually in the browser:
+
+| Page | Check |
+|---|---|
+| `/tracker` | Feed loads, entry cards show hero photos with overlays |
+| `/tracker` | Text-only cards (no photo) show date+location meta above title |
+| `/tracker` | Mini-map renders, teal markers and route |
+| `/map` | Full-height map, teal markers, route polyline |
+| `/map` | Tap marker → popup with date, title, "Read entry →" link |
+| `/stats` | 2×2 grid of stat blocks, teal numbers, correct counts |
+| `/tracker/` | Hero image full-width at top (if photos exist) |
+| `/tracker/` | Title in DM Serif Display, large |
+| `/tracker/` | Photo gallery (2/3-col grid), lightbox opens on tap |
+| `/post` | Lat/lng fields NOT visible |
+| `/post` | Tap Post Entry → success message → redirects to /tracker |
+| Mobile 375px | All pages usable without horizontal scroll |
+| Mobile 375px | No font size < 14px for readable text |
+
+- [ ] **Step 5: Final commit**
+
+```bash
+cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast/user
+git add themes/intotheeast/css/style.css
+git commit -m "feat: add reduced-motion support, keyboard focus, mobile polish"
+```
+
+---
+
+### Task 9: Update documentation
+
+**Files:**
+- Modify: `user/docs/qa-test-plan.md` (add visual QA section)
+
+- [ ] **Step 1: Add visual design QA section to qa-test-plan.md**
+
+Append a new section to `user/docs/qa-test-plan.md`:
+
+```markdown
+## Visual Design QA — Redesign Checklist
+
+**Design spec:** `user/docs/design/design-spec.md`
+
+### Typography
+- [ ] DM Serif Display loads on entry titles, page headings, stats numbers, site title
+- [ ] DM Sans loads on all body text, nav, labels, form fields
+- [ ] No fallback font (Georgia/system-sans) visible in place of custom fonts
+
+### Colors
+- [ ] Page background is warm paper (#F7F5F2), not pure white
+- [ ] All links and CTAs use teal (#1F6B5A), not blue (#0066cc)
+- [ ] Active nav link is teal
+- [ ] Map markers and route polyline are teal
+
+### Entry cards
+- [ ] Cards with photos show full-bleed 16:9 image
+- [ ] Date + location overlay visible on photo gradient
+- [ ] Entry title below photo in DM Serif Display
+- [ ] Cards without photos show date/location meta row above title
+- [ ] Photo zoom on hover (desktop only)
+
+### Header
+- [ ] 3px teal bar at top of header
+- [ ] "into the east" title in DM Serif Display
+- [ ] Sticky on scroll
+
+### Post form
+- [ ] Lat/lng inputs not visible
+- [ ] "✓ Location captured" feedback in teal on success
+- [ ] Submit button full-width, teal, 52px+ height
+
+### Mobile
+- [ ] All interactive elements ≥ 44px touch target
+- [ ] No horizontal scroll at 375px
+- [ ] iOS: no font-size zoom on input focus
+```
+
+- [ ] **Step 2: Commit documentation**
+
+```bash
+cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast/user
+git add docs/qa-test-plan.md docs/design/design-spec.md docs/superpowers/plans/2026-06-18-ui-redesign.md
+git commit -m "docs: add UI redesign spec, plan, and visual QA checklist"
+```
+
+
+ {% endif %}
+
+ {{ page.title }}
+ +
+
+
+
+{% endblock %}
+```
+
+- [ ] **Step 3: Replace the Post form CSS section**
+
+Find `/* ── Post form ──` in style.css. Replace it entirely with:
+
+```css
+/* ── Post form ──────────────────────────────────────────────────────────────── */
+
+.post-form-wrap h1 {
+ font-family: var(--font-display);
+ font-size: var(--text-xl);
+ font-weight: 400;
+ margin-bottom: var(--space-6);
+ color: var(--color-ink);
+}
+
+/* Hide GPS coordinate fields — filled by JS, not user-facing */
+.gps-hidden-field { display: none !important; }
+
+/* Grav form field wrappers */
+.form-field { margin-bottom: var(--space-5); }
+.form-label label {
+ display: block;
+ font-size: var(--text-sm);
+ font-weight: 600;
+ color: var(--color-ink);
+ margin-bottom: var(--space-2);
+}
+
+.form-field input[type="text"],
+.form-field input[type="email"],
+.form-field input[type="datetime-local"],
+.form-field textarea {
+ width: 100%;
+ font-family: var(--font-ui);
+ font-size: var(--text-base);
+ padding: 0.875rem 1rem;
+ border: 1px solid var(--color-border);
+ border-radius: var(--radius-md);
+ background: var(--color-canvas);
+ color: var(--color-ink);
+ min-height: 44px;
+ transition: border-color 0.15s;
+ -webkit-appearance: none;
+}
+
+.form-field input:focus,
+.form-field textarea:focus {
+ outline: 2px solid var(--color-accent);
+ outline-offset: 1px;
+ border-color: var(--color-accent);
+}
+
+.form-field textarea { resize: vertical; min-height: 160px; line-height: var(--leading-normal); }
+
+/* Submit button — Grav renders it as .btn or input[type=submit] */
+.form-actions input[type="submit"],
+.form-actions .btn,
+.form-actions button[type="submit"] {
+ display: block;
+ width: 100%;
+ padding: 1rem;
+ min-height: 52px;
+ background: var(--color-accent);
+ color: var(--color-accent-on);
+ border: none;
+ border-radius: var(--radius-md);
+ font-family: var(--font-ui);
+ font-size: var(--text-base);
+ font-weight: 600;
+ cursor: pointer;
+ transition: background 0.15s;
+ margin-top: var(--space-6);
+}
+
+.form-actions input[type="submit"]:hover,
+.form-actions button[type="submit"]:hover { background: var(--color-accent-hover); }
+
+/* Action buttons row (Get Location, Get Weather) */
+.form-action-row {
+ display: flex;
+ gap: var(--space-3);
+ margin-top: var(--space-5);
+}
+
+.btn-action {
+ flex: 1;
+ padding: 0.75rem var(--space-3);
+ min-height: 44px;
+ background: var(--color-canvas);
+ border: 1px solid var(--color-border);
+ border-radius: var(--radius-md);
+ font-family: var(--font-ui);
+ font-size: var(--text-sm);
+ font-weight: 500;
+ cursor: pointer;
+ color: var(--color-ink);
+ transition: background 0.15s, border-color 0.15s;
+}
+
+.btn-action:hover { background: var(--color-paper); border-color: var(--color-accent); }
+
+/* Status feedback lines */
+.form-status {
+ font-size: var(--text-sm);
+ color: var(--color-ink-muted);
+ margin-top: var(--space-2);
+ min-height: 1.4em;
+}
+
+.form-status--ok { color: var(--color-accent); }
+.form-status--err { color: #B44A2A; }
+```
+
+- [ ] **Step 4: Verify post form**
+
+Open `http://100.96.115.96:8081/post` (logged in). Verify:
+- Lat/lng inputs not visible (`.gps-hidden-field` hidden via CSS)
+- Inputs have rounded corners, proper padding, focus ring in teal
+- "Get Location" and "Get Weather" buttons side by side, same width
+- "Post Entry" (or whatever the submit label is) in teal, full-width
+- Tap "Get Location" → status line shows "✓ Location captured · lat, lng" in teal
+- Mobile at 375px: all inputs and buttons are thumb-friendly
+
+- [ ] **Step 5: Commit**
+
+```bash
+cd /home/mischa/Nextcloud/Projects/travel-blog-intotheeast/user
+git add pages/02.post/post-form.md themes/intotheeast/templates/post-form.html.twig themes/intotheeast/css/style.css
+git commit -m "feat: redesign post form — hide GPS fields, teal CTA, better mobile UX"
+```
+
+---
+
+### Task 7: Stats + map + mini-map styling
+
+**Files:**
+- Modify: `user/themes/intotheeast/templates/stats.html.twig`
+- Modify: `user/themes/intotheeast/css/style.css` (Map, Stats, Mini-map sections)
+
+**Interfaces:**
+- Produces: styled stats page and map page using design tokens
+
+- [ ] **Step 1: Update stats page heading**
+
+In `user/themes/intotheeast/templates/stats.html.twig`, replace the `New Entry
+ {% include 'forms/form.html.twig' ignore missing %} + +
+
+
+
+
+
+