diff --git a/.github/labels.yml b/.github/labels.yml
index 07acb8f..bbbc305 100644
--- a/.github/labels.yml
+++ b/.github/labels.yml
@@ -109,4 +109,4 @@
 
 - name: 'size: XL'
   color: 'FAEAEA'
-  description: 'Diff 500+ lines — consider splitting'
\ No newline at end of file
+  description: 'Diff 500+ lines — consider splitting'
diff --git a/CHANGELOG.md b/CHANGELOG.md
index b807e08..d10c511 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,52 +5,69 @@ All notable changes to Attyre will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## Current Version [v2026.04.26] - 2026-04-26 *(automated fixes by Claude Code)*
+## Current Version [v2026.05.11]
 
-### Fixed (v2026.04.26)
+### Fixed
 
-- **Category validation error now visible**: `add-item` and `item-detail` forms were missing the `category-error` element, so the "Category is required" message was silently swallowed — error paragraph now rendered correctly under the category select.
-- **Crop button re-usable after first crop**: After applying a crop in the add-item form, the replacement preview button had no event listener attached, making subsequent crops impossible — listener is now re-wired via a recursive helper after each crop.
-- **localStorage quota errors surfaced**: `saveItems` was catching `QuotaExceededError` silently; it now re-throws so callers can alert the user when storage is full.
+- **Mobile app shell invisible on older phones**: `.app-shell` used `height: 100dvh` with no fallback — `dvh` is unsupported on iOS < 16 and Chrome < 108, causing the shell to collapse to zero height and render nothing. Added `height: 100vh` fallback immediately before the `dvh` line.
+- **Initial page never renders on slow mobile connections**: `app.js` registered a `DOMContentLoaded` listener unconditionally, but ES modules are fetched asynchronously — on real phones the event can fire before the module loads, leaving `#app` permanently empty. Now guards with a `document.readyState` check so `renderPage()` always runs.
+- **PWA `start_url` mismatch on iOS**: `manifest.json` had `"start_url": "/"` while the app uses hash routing — launching from the iOS home screen landed on a bare static file. Changed to `"/index.html#/"`.
 
-### Changed (v2026.04.26)
+### Added
 
-- **PWA manifest colours corrected**: `theme_color` was a leftover placeholder purple (`#6C63FF`) — updated to the app's actual gold (`#C9A96E`); `background_color` updated to match light-mode page background (`#F5F0E8`); placeholder screenshot SVGs updated to match; `start_url` corrected from `/index.html` to `/`.
+- **Skip-to-content link**: Keyboard/switch-access users can now press Tab on any page to reveal a "Skip to main content" link that jumps focus directly to the `#app` region.
+- **Global `:focus-visible` ring**: All interactive elements (buttons, links, item cards, calendar days) now show a visible gold focus outline when navigated by keyboard. Accessibility mode uses a thicker blue outline.
+- **`prefers-reduced-motion` support**: All CSS transitions and animations are suppressed when the OS "Reduce Motion" setting is enabled.
+- **Screen reader page announcements**: A hidden `aria-live` region announces the page title on every navigation and announces when accessibility mode is toggled on/off.
+- **Wardrobe filter result announcements**: Screen readers are told how many items match the current filters (or "No items match your filters") whenever filters change.
+- **Calendar date announcements**: Selecting a calendar day announces the date and whether an outfit is planned for that day.
+- **Calendar keyboard navigation**: Calendar day cells now have `tabindex="0"` and respond to Enter/Space for selection, plus full ARIA grid semantics (`role="grid"`, `role="gridcell"`, `aria-selected`).
+- **Item cards are focusable buttons**: Item cards changed from `<div>` to `<button>` — screen readers now announce them with the correct role and keyboard users get Enter/Space activation for free.
+- **Outfit selector `aria-pressed` state**: When picking items for a calendar day, each card reflects its selected state via `aria-pressed` so screen readers can track selection without relying on visual-only border/background changes.
+- **Form error linkage**: Name and category inputs in the add-item form are now connected to their inline error messages via `aria-describedby`.
 
-### Technical Improvements (v2026.04.26)
+### Changed
 
-- **SRI hashes added to CDN scripts**: `integrity` + `crossorigin="anonymous"` attributes added to all three CDN tags (lz-string, Cropper.js JS and CSS) to guard against CDN compromise.
-- **APP_VERSION CI regex tightened**: Deploy-preview workflow regex now enforces the strict `YYYY.MM.DD` format instead of accepting any sequence of digits and dots.
-- **Label-sync workflow fixed**: Added `pip install pyyaml` step before the YAML parse step, which would otherwise fail with `ModuleNotFoundError` since `yaml` is not in Python's standard library.
-- **LZString null check corrected**: `getItems` fallback now checks `=== null` instead of falsy, correctly handling the edge case where LZString returns an empty string.
+- **Accessibility mode improvements**: Beyond the existing color swap, accessibility mode now also increases the base font size to 16 px, strengthens border contrast, and thickens nav icon strokes for better legibility.
 
 ---
 
-## Prior Release [v2026.04.24] - 2026-04-24
+## Prior Releases [v2026.04.24] - 2026-04-24
 
-### Added (Current Version)
+### Added
 
 - **Responsive App Shell**: Added a full desktop sidebar + mobile topbar/bottom-nav navigation system for clearer routing and faster access to core pages.
 - **New Stats Page**: Introduced a dedicated stats view (`#/stats`) with category/season/warmth breakdowns, usage insights, and most-worn/never-worn analysis.
 - **Expanded Wardrobe Filtering**: Added weather-tag filter chips on wardrobe browsing in addition to text, category, and season filters.
 
-### Changed (Current Version)
+### Changed
 
 - **Visual Redesign (v2)**: Reworked the global interface with a warm theme, updated typography, refreshed cards, buttons, alerts, and page layouts.
 - **Home Experience**: Redesigned quick actions, outfit inspiration, saved outfit preview, and usage highlights for better at-a-glance insights.
 - **Suggest Workflow**: Improved city input UX, loading/error states, weather card presentation, and ranked suggestion display.
 - **Calendar Planning UX**: Rebuilt month navigation and date selection with richer day states (today/selected/has-outfit) and streamlined outfit assignment.
 - **Component Refresh**: Updated item cards with SVG category icons and improved fallback rendering when images are unavailable.
+- **PWA manifest colours corrected**: `theme_color` was a leftover placeholder purple (`#6C63FF`) — updated to the app's actual gold (`#C9A96E`); `background_color` updated to match light-mode page background (`#F5F0E8`); placeholder screenshot SVGs updated to match; `start_url` corrected from `/index.html` to `/`.
 
-### Technical Improvements (Current Version)
+### Technical Improvements
 
 - **Router Enhancements**: Added `stats` route integration and synchronized active-state handling across sidebar and bottom navigation.
 - **Mode Initialization Cleanup**: Simplified dark/accessibility mode application and favicon switching logic on startup and route renders.
 - **Codebase Structure Updates**: Refactored page modules (`home`, `wardrobe`, `suggest`, `calendar`) for cleaner rendering flow and reusable UI behavior.
 - **Version Bump**: Updated app constant to `APP_VERSION = '2026.04.24'` for this release.
 - **Github Workflows**: Added Github Workflows for Pull Requests and Issues.
+- **SRI hashes added to CDN scripts**: `integrity` + `crossorigin="anonymous"` attributes added to all three CDN tags (lz-string, Cropper.js JS and CSS) to guard against CDN compromise.
+- **APP_VERSION CI regex tightened**: Deploy-preview workflow regex now enforces the strict `YYYY.MM.DD` format instead of accepting any sequence of digits and dots.
+- **Label-sync workflow fixed**: Added `pip install pyyaml` step before the YAML parse step, which would otherwise fail with `ModuleNotFoundError` since `yaml` is not in Python's standard library.
+- **LZString null check corrected**: `getItems` fallback now checks `=== null` instead of falsy, correctly handling the edge case where LZString returns an empty string.
+
+### Fixed
+
+- **Category validation error now visible**: `add-item` and `item-detail` forms were missing the `category-error` element, so the "Category is required" message was silently swallowed — error paragraph now rendered correctly under the category select.
+- **Crop button re-usable after first crop**: After applying a crop in the add-item form, the replacement preview button had no event listener attached, making subsequent crops impossible — listener is now re-wired via a recursive helper after each crop.
+- **localStorage quota errors surfaced**: `saveItems` was catching `QuotaExceededError` silently; it now re-throws so callers can alert the user when storage is full.
 
-## Prior Release [v1.5.0] - 2026-03-10
+## [v1.5.0] - 2026-03-10
 
 ### Added (v1.5.0)
 
diff --git a/CLAUDE.md b/CLAUDE.md
deleted file mode 100644
index 035411e..0000000
--- a/CLAUDE.md
+++ /dev/null
@@ -1,67 +0,0 @@
-# CLAUDE.md
-
-This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
-
-## What This Is
-
-Attyre is a **local-first Progressive Web App** — a vanilla JS wardrobe manager with no backend, no build step, and no framework. All data lives in `localStorage`. The app is served as static files and deployed to Cloudflare.
-
-## Development
-
-```bash
-# Serve locally
-python3 -m http.server 8000
-# App available at http://localhost:8000
-```
-
-There is no npm, no bundler, no transpilation step. The app runs directly in the browser as ES modules.
-
-## CI Checks (must pass on PRs)
-
-- **Smoke test** (`.github/workflows/deploy-preview.yml`): starts `python3 -m http.server 8000`, verifies all static assets return HTTP 200, validates `manifest.json` is valid JSON, and confirms `APP_VERSION` in `js/app.js` matches the format `'YYYY.MM.DD'` (e.g. `'2026.04.24'`).
-- **Changelog check**: validates that `CHANGELOG.md` was updated.
-- **PR size check**: warns on large PRs.
-
-## Architecture
-
-The app is split into four clear layers:
-
-| Layer | Files | Responsibility |
-|---|---|---|
-| Routing | `js/app.js` | Hash-based router (`#/route`), mode init (dark/accessibility), fade transitions |
-| Data | `js/store.js` | localStorage CRUD; items are LZString-compressed with a raw-JSON fallback |
-| Logic | `js/engine.js` | Pure ranking engine — no DOM, no side effects |
-| Pages | `js/pages/*.js` | One `render*()` function per page; imperative innerHTML + event listeners |
-
-`js/components/item-card.js` is the only shared UI component.
-
-### Data model
-
-```js
-Item: { id, name, category, color?, warmth(1-5), seasons?, occasions?, weatherTags?, imageUri?(dataURL), usage, createdAt }
-SavedOutfit: { id, name, itemIds[], createdAt }
-OutfitDates: { 'YYYY-MM-DD': [itemId, ...] }
-```
-
-Storage keys: `attyre_items` (LZString), `attyre_saved_outfits`, `attyre_outfit_dates`, `attyre_dark_mode`, `attyre_accessibility`.
-
-### External APIs (no auth required)
-
-- **Nominatim** (OpenStreetMap) — city geocoding; User-Agent must be `Attyre/YYYY.MM.DD (attyre.aetherassembly.org)`
-- **Open-Meteo** — current weather forecast
-
-## Key Conventions
-
-**XSS prevention** — every page defines a local `esc()` helper and uses it for all user-supplied strings in template literals. Never interpolate raw user data into `innerHTML`.
-
-**Page rendering pattern** — each `js/pages/*.js` exports a single `render**(container)` function that creates a `div.page-wrap`, sets its `innerHTML`, appends it to `container`, then wires up event listeners.
-
-**No global state** — pages call `store.*()` directly; changes are persisted immediately on blur/submit.
-
-**Accessibility vs. Dark Mode** — two independent boolean flags. Accessibility mode (`attyre_accessibility`) swaps the gold accent for blue and switches the favicon to the colorblind-safe variant. They do not imply each other.
-
-**Image storage** — images are stored as data URLs inside `localStorage`. Cropper.js (CDN) handles client-side cropping before save. No external image host.
-
-**Backwards compatibility** — `store.js` silently falls back from LZString to raw JSON if decompression fails. The legacy `attyre_colorblind` key is ignored.
-
-**Version string** — `APP_VERSION` in `js/app.js` must be kept in `'YYYY.MM.DD'` format; CI enforces this with a regex.
diff --git a/LICENSE b/LICENSE
index 6f517f4..80b031b 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,8 +1,8 @@
 Attyre
-Copyright (c) 2026 Aether Assembly (Aster, Ollie, Milo)
+Copyright (c) 2026 AetherAssembly (Aster, Ollie, Milo)
 
 This project is currently licensed under the GNU Affero General Public
-License v3.0 (AGPLv3). Aether Assembly is in the process of finalizing
+License v3.0 (AGPLv3). AetherAssembly is in the process of finalizing
 a custom organization-wide license. Until that license is in effect,
 the AGPLv3 governs your use of this software.
 
@@ -10,15 +10,14 @@ In line with AetherAssembly's intended licensing direction:
 
 - Personal use is free and unrestricted.
 - Commercial use requires a written commercial agreement with
-  AetherAssembly. Contact support@aetherassembly.org.
+  AetherAssembly. Contact [support@aetherassembly.org](mailto:support@aetherassembly.org).
 - Forks and modifications must remain publicly available under
   the same license. You may not privatize or relicense a fork.
-- Attribution to Aether Assembly must be maintained in all
+- Attribution to AetherAssembly must be maintained in all
   copies, forks, and derivative works.
 
-For the full AGPLv3 license text, see:
-https://www.gnu.org/licenses/agpl-3.0.html
+Click here for the full [AGPLv3 license text](https://www.gnu.org/licenses/agpl-3.0.html).
 
 For commercial licensing inquiries:
-support@aetherassembly.org
-https://forms.gle/T4i7GGzaT3HUrffm9
\ No newline at end of file
+[support@aetherassembly.org](mailto:support@aetherassembly.org)
+[Form](https://forms.gle/T4i7GGzaT3HUrffm9)
diff --git a/Privacy-Policy.html b/Privacy-Policy.html
index 0a1fc28..e08369b 100644
--- a/Privacy-Policy.html
+++ b/Privacy-Policy.html
@@ -123,14 +123,14 @@
     </script>
 
     <h1>Privacy Policy</h1>
-    <p class="subtitle">Last updated: April 2026 &nbsp;·&nbsp; Attyre by Aether Assembly &nbsp;·&nbsp; <a href="https://attyre.aetherassembly.org">attyre.aetherassembly.org</a></p>
+    <p class="subtitle">Last updated: May 2026 &nbsp;·&nbsp; Attyre by AetherAssembly &nbsp;·&nbsp; <a href="https://attyre.aetherassembly.org">attyre.aetherassembly.org</a></p>
 
     <div class="callout">
       <strong>Short version:</strong> Attyre collects nothing. Your wardrobe data never leaves your device. There are no accounts, no servers, no tracking, and no third-party data sharing of any kind.
     </div>
 
     <h2>1. Who We Are</h2>
-    <p>Attyre is a free, browser-based wardrobe management app developed and maintained by Aether Assembly — a small team consisting of Aster, Ollie, and Milo. You can reach us at <a href="mailto:support@aetherassembly.org">support@aetherassembly.org</a> or via our <a href="https://forms.gle/T4i7GGzaT3HUrffm9">contact form</a>.</p>
+    <p>Attyre is a free, browser-based wardrobe management app developed and maintained by AetherAssembly — a small team consisting of Aster, Ollie, and Milo. You can reach us at <a href="mailto:support@aetherassembly.org">support@aetherassembly.org</a> or via our <a href="https://forms.gle/T4i7GGzaT3HUrffm9">contact form</a>.</p>
 
     <h2>2. Data We Do Not Collect</h2>
     <p>We do not collect, store, transmit, or process any personal data on our servers — because we don't have any servers. Specifically, we do not collect:</p>
@@ -148,7 +148,7 @@ <h2>3. Data Stored on Your Device</h2>
       <li>Your clothing items (names, categories, tags, warmth levels, notes)</li>
       <li>Any photos you attach to items (stored as base64 data URLs)</li>
       <li>Saved outfit combinations and calendar plans</li>
-      <li>App preferences (dark mode, colorblind mode)</li>
+      <li>App preferences (dark mode, accessibility mode)</li>
     </ul>
     <p>This data is entirely under your control. You can export it, delete it, or wipe it at any time from the Settings page. Clearing your browser's cache or localStorage will permanently delete all Attyre data — there is no cloud backup.</p>
 
@@ -158,7 +158,7 @@ <h2>4. Third-Party APIs</h2>
       <li><strong>OpenStreetMap Nominatim</strong> (<a href="https://nominatim.openstreetmap.org" target="_blank" rel="noopener">nominatim.openstreetmap.org</a>) — converts a city name to coordinates. Subject to the <a href="https://operations.osmfoundation.org/policies/nominatim/" target="_blank" rel="noopener">Nominatim Usage Policy</a>.</li>
       <li><strong>Open-Meteo</strong> (<a href="https://open-meteo.com" target="_blank" rel="noopener">open-meteo.com</a>) — fetches current temperature for those coordinates. Subject to the <a href="https://open-meteo.com/en/terms" target="_blank" rel="noopener">Open-Meteo Terms</a>.</li>
     </ul>
-    <p>Both are free, open services with no affiliation to Aether Assembly. Their own privacy policies apply to any data they may collect from API requests.</p>
+    <p>Both are free, open services with no affiliation to AetherAssembly. Their own privacy policies apply to any data they may collect from API requests.</p>
     <p>If you do not use the Suggest Outfit feature, no outbound requests are made at all.</p>
 
     <h2>5. Children's Privacy</h2>
@@ -168,7 +168,7 @@ <h2>6. Your Rights</h2>
     <p>Since we hold no data about you, there is nothing to request, correct, or delete on our end. To manage or delete your own data, use the Export and Import tools in the app's Settings page, or clear your browser's localStorage directly.</p>
 
     <h2>7. Support</h2>
-    <p>Attyre is actively maintained by Aether Assembly. Support is provided for the current release and the two most recent major versions. For help, questions, or to report an issue:</p>
+    <p>Attyre is actively maintained by AetherAssembly. Support is provided for the current release and the two most recent major versions. For help, questions, or to report an issue:</p>
     <ul>
       <li>Email: <a href="mailto:support@aetherassembly.org">support@aetherassembly.org</a></li>
       <li>Contact form: <a href="https://forms.gle/T4i7GGzaT3HUrffm9">forms.gle/T4i7GGzaT3HUrffm9</a></li>
@@ -181,7 +181,7 @@ <h2>9. Contact</h2>
     <p>Questions or concerns? Reach us at <a href="mailto:support@aetherassembly.org">support@aetherassembly.org</a> or via our <a href="https://forms.gle/T4i7GGzaT3HUrffm9">contact form</a>.</p>
 
     <footer>
-      &copy; 2026 Aether Assembly &nbsp;·&nbsp; Attyre &nbsp;·&nbsp; <a href="index.html">Back to App</a>
+      &copy; 2026 AetherAssembly &nbsp;·&nbsp; Attyre &nbsp;·&nbsp; <a href="index.html">Back to App</a>
     </footer>
 
   </div>
diff --git a/README.md b/README.md
index 424a803..cc8055e 100644
--- a/README.md
+++ b/README.md
@@ -1,12 +1,12 @@
 # Attyre
 
-[![Version](https://img.shields.io/badge/version-2026.04.26-C9A96E)](CHANGELOG.md)
-[![License: GPL v3](https://img.shields.io/badge/license-GPLv3-blue.svg)](LICENSE)
+[![Version](https://img.shields.io/badge/version-2026.05.11-C9A96E)](CHANGELOG.md)
+[![License: AGPL v3](https://img.shields.io/badge/license-AGPLv3-blue.svg)](LICENSE)
 [![Privacy Policy](https://img.shields.io/badge/privacy-policy-16a34a)](Privacy-Policy.html)
 
 Smart wardrobe manager with weather-based suggestions, planning tools, and local-first privacy.
 
-Current app version: 2026.04.26
+Current app version: 2026.05.11
 
 ## What Attyre Does
 
@@ -73,8 +73,13 @@ Current app version: 2026.04.26
 ### Accessibility and Theming
 
 - Dark mode toggle.
-- Accessibility mode toggle with safe high-contrast palette and icon support.
-- Accessibility mode also switches favicon variant.
+- Accessibility mode toggle with safe high-contrast blue palette, larger font, stronger borders, thicker nav icon strokes, and colorblind-friendly favicon variant.
+- Skip-to-content link visible on keyboard focus.
+- Global focus ring on all interactive elements; thicker in accessibility mode.
+- `prefers-reduced-motion` support: all transitions and animations are suppressed when the OS setting is enabled.
+- Screen reader announcements via hidden `aria-live` region for page navigation, filter results, and calendar date selection.
+- Item cards are `<button>` elements for keyboard and screen reader compatibility.
+- Calendar grid uses ARIA grid semantics with keyboard Enter/Space day selection.
 
 ## Data Model and Storage
 
@@ -115,6 +120,7 @@ Scoring:
 
 - Web app manifest is included.
 - Standalone display and app shortcuts are configured.
+- `start_url` uses `"/index.html#/"` for correct hash-router launch from home screen.
 - Install prompts depend on browser and platform support.
 
 ## External Dependencies
@@ -128,7 +134,7 @@ CDN dependencies loaded in app shell:
 
 - Nominatim search endpoint for city geocoding.
 - Open-Meteo forecast endpoint for current weather.
-- User-Agent currently set to Attyre/2026.04.26 (attyre.aetherassembly.org) for Nominatim requests.
+- User-Agent currently set to Attyre/2026.05.11 (attyre.aetherassembly.org) for Nominatim requests.
 
 ## Project Structure
 
@@ -162,7 +168,7 @@ Requires modern browser support for:
 
 ## License
 
-GNU AGPL v3.0.
+[GNU AGPL v3.0.](LICENSE)
 
 ## Live App
 
diff --git a/SECURITY.md b/SECURITY.md
index cb1357f..cc3e528 100644
--- a/SECURITY.md
+++ b/SECURITY.md
@@ -2,14 +2,16 @@
 
 ## Supported Versions
 
-Security fixes are applied to the current release and the two most recent major versions.
+Security fixes are applied to the current release and the two most recent releases.
 
-- 1.5.x: ✅ Active support
-- 1.4.x: ✅ Active support
-- 1.3.x: ✅ Active support
-- < 1.3.0: ❌ Not supported
+| Version | Status |
+|---|---|
+| 2026.05.11 | ✅ Active support |
+| 2026.04.26 | ✅ Active support |
+| 2026.04.24 | ✅ Active support |
+| < 2026.04.24 | ❌ Not supported |
 
-As new versions are released, this table will be updated to reflect the current support window. Versions that fall outside the two-major-version window enter deprecated status and are acknowledged but no longer actively patched. Versions older than that are archived to cold storage. Retrieval of archived versions is available as a paid service; contact us at [support@aetherassembly.org](mailto:support@aetherassembly.org) for details.
+As new versions are released, this table will be updated to reflect the current support window. Versions outside the support window are no longer actively patched.
 
 ## Reporting a Vulnerability
 
diff --git a/index.html b/index.html
index 1c3a085..595dabc 100644
--- a/index.html
+++ b/index.html
@@ -13,6 +13,7 @@
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.css" integrity="sha512-cyzxRvewl+FOKTtpBzYjW6x6IAYUCZy3sGP40hn+DQkqeluGRCax7qztK2ImL64SA+C7kVWdLI6wvdlStawhyw==" crossorigin="anonymous">
 </head>
 <body>
+  <a href="#app" class="skip-link">Skip to main content</a>
   <!-- Desktop layout -->
   <div class="app-shell">
 
@@ -134,6 +135,8 @@
     </div>
   </div>
 
+  <div id="sr-announce" aria-live="polite" aria-atomic="true"
+       style="position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden"></div>
   <script type="module" src="js/app.js"></script>
   <script>
     // Hamburger / sidebar toggle
diff --git a/js/app.js b/js/app.js
index 20d4618..5991be6 100644
--- a/js/app.js
+++ b/js/app.js
@@ -12,7 +12,16 @@ import { renderSettings } from './pages/settings.js';
 import { renderStats } from './pages/stats.js';
 
 const app = document.getElementById('app');
-export const APP_VERSION = '2026.04.26';
+export const APP_VERSION = '2026.05.11';
+
+// ── Screen reader announcer ───────────────────────────────
+
+export function announceToScreenReader(message) {
+  const el = document.getElementById('sr-announce');
+  if (!el) return;
+  el.textContent = '';
+  setTimeout(() => { el.textContent = message; }, 50);
+}
 
 // ── Mode helpers ──────────────────────────────────────────
 
@@ -21,6 +30,7 @@ export function updateAccessibilityMode(on) {
   document.documentElement.classList.remove('colorblind-mode');
   const icon = document.querySelector('link[rel="icon"]');
   if (icon) icon.href = on ? 'assets/attyre-logo-sm-cb.svg' : 'assets/attyre-logo-small.svg';
+  announceToScreenReader(on ? 'Accessibility mode enabled' : 'Accessibility mode disabled');
 }
 
 export function updateDarkMode(on) {
@@ -71,6 +81,8 @@ async function renderPage() {
 
   updateActiveNav(hash);
   app.style.opacity = '1';
+  const pageTitle = app.querySelector('h1');
+  if (pageTitle) announceToScreenReader(pageTitle.textContent.trim());
 }
 
 function updateActiveNav(hash) {
@@ -88,7 +100,9 @@ function updateActiveNav(hash) {
 }
 
 window.addEventListener('hashchange', renderPage);
-document.addEventListener('DOMContentLoaded', () => {
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', () => { initModes(); renderPage(); });
+} else {
   initModes();
   renderPage();
-});
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/js/components/item-card.js b/js/components/item-card.js
index 7d9a184..1b6e9f9 100644
--- a/js/components/item-card.js
+++ b/js/components/item-card.js
@@ -15,7 +15,8 @@ function esc(t) {
 }
 
 export function renderItemCard(item) {
-  const card = document.createElement('div');
+  const card = document.createElement('button');
+  card.type = 'button';
   card.className = 'item-card';
 
   const thumb = item.imageUri
diff --git a/js/pages/add-item.js b/js/pages/add-item.js
index 4b98ad4..6d10b14 100644
--- a/js/pages/add-item.js
+++ b/js/pages/add-item.js
@@ -15,12 +15,12 @@ export function renderAddItem(container) {
         <form id="add-item-form">
           <!-- Name -->
           <label for="name">Name *</label>
-          <input type="text" id="name" name="name" placeholder="e.g. Blue Jeans" required>
+          <input type="text" id="name" name="name" placeholder="e.g. Blue Jeans" required aria-describedby="name-error">
           <p class="error" id="name-error"></p>
 
           <!-- Category -->
           <label for="category">Category *</label>
-          <select id="category" name="category" required>
+          <select id="category" name="category" required aria-describedby="category-error">
             <option value="">Select a category</option>
             ${CATEGORIES.map(cat => `<option value="${cat}">${capitalize(cat)}</option>`).join('')}
           </select>
diff --git a/js/pages/calendar.js b/js/pages/calendar.js
index 1bbd9f2..752844b 100644
--- a/js/pages/calendar.js
+++ b/js/pages/calendar.js
@@ -2,6 +2,7 @@
 
 import * as store from '../store.js';
 import { renderItemCard } from '../components/item-card.js';
+import { announceToScreenReader } from '../app.js';
 
 function esc(t) {
   return String(t ?? '').replace(/[&<>"']/g, m => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#039;'}[m]));
@@ -57,9 +58,9 @@ export function renderCalendar(container) {
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><polyline points="9 18 15 12 9 6"/></svg>
           </button>
         </div>
-        <div class="calendar-grid">
-          ${WEEKDAYS.map(d => `<div class="calendar-day-header">${d}</div>`).join('')}
-          ${Array(firstDay).fill(0).map(() => `<div class="calendar-day other-month"></div>`).join('')}
+        <div class="calendar-grid" role="grid" aria-label="${MONTHS[month]} ${year}">
+          ${WEEKDAYS.map(d => `<div class="calendar-day-header" role="columnheader" aria-label="${d}">${d}</div>`).join('')}
+          ${Array(firstDay).fill(0).map(() => `<div class="calendar-day other-month" role="gridcell" aria-hidden="true"></div>`).join('')}
           ${Array.from({length: daysInMonth}, (_, i) => {
             const d = i + 1;
             const dateStr = `${year}-${String(month+1).padStart(2,'0')}-${String(d).padStart(2,'0')}`;
@@ -70,7 +71,8 @@ export function renderCalendar(container) {
             if (isToday) cls += ' today';
             if (isSelected) cls += ' selected';
             if (hasOutfit) cls += ' has-outfit';
-            return `<div class="${cls}" data-date="${dateStr}">${d}</div>`;
+            const label = `${MONTHS[month]} ${d}, ${year}${hasOutfit ? ', outfit planned' : ''}`;
+            return `<div class="${cls}" role="gridcell" tabindex="0" data-date="${dateStr}" aria-selected="${isSelected}" aria-label="${label}">${d}</div>`;
           }).join('')}
         </div>
       </div>
@@ -96,6 +98,9 @@ export function renderCalendar(container) {
         renderCalGrid();
         renderOutfitPanel();
       });
+      el.addEventListener('keydown', e => {
+        if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); el.click(); }
+      });
     });
   }
 
@@ -105,6 +110,11 @@ export function renderCalendar(container) {
     const allItems = store.getItems();
     const d = new Date(selectedDateStr + 'T12:00:00');
     const dateLabel = d.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' });
+    announceToScreenReader(
+      itemIds.length > 0
+        ? `${dateLabel}: ${itemIds.length} item outfit planned`
+        : `${dateLabel}: no outfit planned`
+    );
 
     if (itemIds.length === 0) {
       outfitPanel.innerHTML = `
@@ -177,18 +187,22 @@ export function renderCalendar(container) {
     allItems.forEach(item => {
       const card = renderItemCard(item);
       card.style.cursor = 'pointer';
-      card.style.border = selected.has(item.id) ? '2px solid var(--accent)' : '1px solid var(--border)';
-      card.style.background = selected.has(item.id) ? 'var(--gold-light)' : '';
+      const isOn = selected.has(item.id);
+      card.style.border = isOn ? '2px solid var(--accent)' : '1px solid var(--border)';
+      card.style.background = isOn ? 'var(--gold-light)' : '';
+      card.setAttribute('aria-pressed', isOn ? 'true' : 'false');
 
       card.addEventListener('click', () => {
         if (selected.has(item.id)) {
           selected.delete(item.id);
           card.style.border = '1px solid var(--border)';
           card.style.background = '';
+          card.setAttribute('aria-pressed', 'false');
         } else {
           selected.add(item.id);
           card.style.border = '2px solid var(--accent)';
           card.style.background = 'var(--gold-light)';
+          card.setAttribute('aria-pressed', 'true');
         }
       });
 
diff --git a/js/pages/settings.js b/js/pages/settings.js
index 76ffd26..92fe839 100644
--- a/js/pages/settings.js
+++ b/js/pages/settings.js
@@ -1,157 +1,207 @@
-// pages/settings.js - Settings page
+// pages/settings.js
 
 import * as store from '../store.js';
 import { updateAccessibilityMode, updateDarkMode, APP_VERSION } from '../app.js';
 
+
 export function renderSettings(container) {
   const isAccessibility = store.isAccessibilityMode();
   const isDarkMode = store.isDarkMode();
   const itemCount = store.getItems().length;
 
-  const html = `
-    <div class="page-container">
-      <div class="container">
-        <h1>Settings</h1>
-
-        <!-- Accessibility -->
-        <div class="settings-section">
-          <h3>Accessibility</h3>
-          <div class="settings-item">
-            <label class="toggle-label">
-              <input type="checkbox" id="accessibility-toggle" ${isAccessibility ? 'checked' : ''}>
-              <span>Accessibility Mode (Colorblind-Friendly)</span>
-            </label>
-            <p style="font-size: 14px; color: var(--text-secondary); margin-top: 4px;">Uses safe colors and icons for all types of colorblindness (protanopia, deuteranopia, tritanopia, achromatopsia).</p>
-          </div>
-          <div class="settings-item">
-            <label class="toggle-label">
-              <input type="checkbox" id="dark-mode-toggle" ${isDarkMode ? 'checked' : ''}>
-              <span>Dark Mode</span>
-            </label>
-          </div>
+  const wrap = document.createElement('div');
+  wrap.className = 'page-wrap';
+
+  wrap.innerHTML = `
+    <div class="page-header">
+      <div>
+        <h1 class="page-title">Settings</h1>
+        <p class="page-subtitle">Preferences, backup, and app info</p>
+      </div>
+    </div>
+
+    <!-- Appearance -->
+    <div class="section-card">
+      <div class="section-card-title">Appearance</div>
+
+      <div class="settings-row">
+        <div>
+          <div class="settings-row-label">Dark Mode</div>
+          <div class="settings-row-hint">Switch to a dark colour scheme</div>
+        </div>
+        <label class="toggle" aria-label="Toggle dark mode">
+          <input type="checkbox" id="dark-mode-toggle" ${isDarkMode ? 'checked' : ''}>
+          <span class="toggle-track"></span>
+        </label>
+      </div>
+
+      <div class="settings-row">
+        <div>
+          <div class="settings-row-label">Accessibility Mode</div>
+          <div class="settings-row-hint">Colorblind-friendly palette, larger text, stronger borders</div>
+        </div>
+        <label class="toggle" aria-label="Toggle accessibility mode">
+          <input type="checkbox" id="accessibility-toggle" ${isAccessibility ? 'checked' : ''}>
+          <span class="toggle-track"></span>
+        </label>
+      </div>
+    </div>
+
+    <!-- Wardrobe -->
+    <div class="section-card">
+      <div class="section-card-title">Wardrobe</div>
+      <div class="settings-row">
+        <div>
+          <div class="settings-row-label">Items in wardrobe</div>
+          <div class="settings-row-hint">Manage items from the Wardrobe page</div>
         </div>
+        <span style="font-size:20px;font-weight:700;color:var(--text-primary)">${itemCount}</span>
+      </div>
+    </div>
+
+    <!-- Backup & Restore -->
+    <div class="section-card">
+      <div class="section-card-title">Backup &amp; Restore</div>
 
-        <!-- Wardrobe Info -->
-        <div class="settings-section">
-          <h3>Wardrobe</h3>
-          <div class="settings-item">
-            <p>You have <strong>${itemCount}</strong> item${itemCount !== 1 ? 's' : ''} in your wardrobe.</p>
-          </div>
+      <div class="settings-row" style="flex-wrap:wrap;gap:10px">
+        <div>
+          <div class="settings-row-label">Export backup</div>
+          <div class="settings-row-hint">Download your wardrobe as a JSON file</div>
         </div>
+        <button id="export-btn" class="btn btn-secondary btn-sm">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+          Export JSON
+        </button>
+        <a id="download-link" style="display:none"></a>
+      </div>
+
+      <div class="settings-row" style="flex-direction:column;align-items:flex-start;gap:8px">
+        <div class="settings-row-label">Import backup</div>
+        <div class="settings-row-hint">Restore from a previously exported JSON file. This will merge with your existing items.</div>
+        <label class="btn btn-secondary btn-sm" style="margin-top:4px;cursor:pointer">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/><polyline points="7 10 12 5 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
+          <span id="import-label">Choose file…</span>
+          <input type="file" id="import-file" accept=".json" aria-describedby="import-error import-success" style="position:absolute;width:1px;height:1px;opacity:0;pointer-events:none">
+        </label>
+        <p class="error" id="import-error" style="margin:0"></p>
+        <p class="success" id="import-success" style="margin:0"></p>
+      </div>
+    </div>
 
-        <!-- Export / Import -->
-        <div class="settings-section">
-          <h3>Backup & Restore</h3>
-          <div class="settings-item">
-            <button id="export-btn" class="btn secondary">Export Backup (JSON)</button>
-            <a id="download-link" style="display: none;"></a>
-          </div>
-          <div class="settings-item">
-            <label for="import-file">Import Backup (JSON)</label>
-            <input type="file" id="import-file" accept=".json">
-            <p class="error" id="import-error"></p>
-            <p class="success" id="import-success"></p>
-          </div>
+    <!-- Links -->
+    <div class="section-card">
+      <div class="section-card-title">Info &amp; Links</div>
+
+      <a href="Privacy-Policy.html" target="_blank" class="settings-row settings-link-row">
+        <div class="settings-link-icon">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
+        </div>
+        <div style="flex:1">
+          <div class="settings-row-label">Privacy Policy</div>
+          <div class="settings-row-hint">How Attyre handles (or rather, doesn't handle) your data</div>
         </div>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px;flex-shrink:0;opacity:0.35"><polyline points="9 18 15 12 9 6"/></svg>
+      </a>
 
-        <!-- The Part Nobody Reads -->
-        <div class="settings-section">
-          <h3>The Part Nobody Reads</h3>
-          <div class="settings-item">
-            <a href="Privacy-Policy.html" target="_blank" class="btn secondary" style="display: inline-block; margin: 0.5rem 0;">View Privacy Policy</a>
-          </div>
+      <a href="https://github.com/AetherAssembly/Attyre" target="_blank" rel="noopener" class="settings-row settings-link-row">
+        <div class="settings-link-icon">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 00-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0020 4.77 5.07 5.07 0 0019.91 1S18.73.65 16 2.48a13.38 13.38 0 00-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 005 4.77a5.44 5.44 0 00-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 009 18.13V22"/></svg>
         </div>
+        <div style="flex:1">
+          <div class="settings-row-label">Attyre on GitHub</div>
+          <div class="settings-row-hint">Source code, issues, and releases</div>
+        </div>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px;flex-shrink:0;opacity:0.35"><polyline points="9 18 15 12 9 6"/></svg>
+      </a>
 
-        <!-- Quick Links -->
-        <div class="settings-section">
-          <h3>Quick Links</h3>
-          <div class="settings-item">
-            <a href="https://github.com/aetherassembly" target="_blank" class="btn secondary" style="display: inline-block; margin: 0.5rem 0;">AetherAssembly GitHub</a>
-          </div>
-          <div class="settings-item">
-            <a href="mailto:support@aetherassembly.org" target="_blank" class="btn secondary" style="display: inline-block; margin: 0.5rem 0;">Helpdesk Email</a>
-          </div>
-          <div class="settings-item">
-            <a href="https://github.com/aetherassembly/attyre" target="_blank" class="btn secondary" style="display: inline-block; margin: 0.5rem 0;">Attyre GitHub</a>
-          </div>
+      <a href="https://aetherassembly.org/about" target="_blank" rel="noopener" class="settings-row settings-link-row">
+        <div class="settings-link-icon">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 00-3-3.87"/><path d="M16 3.13a4 4 0 010 7.75"/></svg>
+        </div>
+        <div style="flex:1">
+          <div class="settings-row-label">AetherAssembly</div>
+          <div class="settings-row-hint">The team behind Attyre</div>
         </div>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px;flex-shrink:0;opacity:0.35"><polyline points="9 18 15 12 9 6"/></svg>
+      </a>
 
-        <!-- Version info -->
-        <div class="settings-section">
-          <h3>App Version</h3>
-          <div class="settings-item" id="version-display"></div>
+      <a href="mailto:support@aetherassembly.org" class="settings-row settings-link-row">
+        <div class="settings-link-icon">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
         </div>
+        <div style="flex:1">
+          <div class="settings-row-label">Get help</div>
+          <div class="settings-row-hint">support@aetherassembly.org</div>
+        </div>
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:14px;height:14px;flex-shrink:0;opacity:0.35"><polyline points="9 18 15 12 9 6"/></svg>
+      </a>
+    </div>
+
+    <!-- Version -->
+    <div class="section-card">
+      <div class="section-card-title">About</div>
+      <div class="settings-row">
+        <div class="settings-row-label">App version</div>
+        <span style="font-size:13px;color:var(--text-muted);font-family:monospace" id="version-display"></span>
+      </div>
+      <div class="settings-row">
+        <div class="settings-row-label">Built by</div>
+        <span style="font-size:13px;color:var(--text-muted)">AetherAssembly</span>
       </div>
     </div>
   `;
 
-  container.innerHTML = html;
+  container.appendChild(wrap);
 
-  // Accessibility toggle
-  const accessibilityToggle = container.querySelector('#accessibility-toggle');
-  accessibilityToggle.addEventListener('change', () => {
-    const isChecked = accessibilityToggle.checked;
-    store.setAccessibilityMode(isChecked);
-    updateAccessibilityMode(isChecked);
+  // Toggles
+  wrap.querySelector('#accessibility-toggle').addEventListener('change', e => {
+    store.setAccessibilityMode(e.target.checked);
+    updateAccessibilityMode(e.target.checked);
   });
 
-  // Dark mode toggle
-  const darkModeToggle = container.querySelector('#dark-mode-toggle');
-  darkModeToggle.addEventListener('change', () => {
-    const isChecked = darkModeToggle.checked;
-    store.setDarkMode(isChecked);
-    updateDarkMode(isChecked);
+  wrap.querySelector('#dark-mode-toggle').addEventListener('change', e => {
+    store.setDarkMode(e.target.checked);
+    updateDarkMode(e.target.checked);
   });
 
-  // Export button
-  const exportBtn = container.querySelector('#export-btn');
-  const downloadLink = container.querySelector('#download-link');
-  
+  // Export
+  const exportBtn = wrap.querySelector('#export-btn');
+  const downloadLink = wrap.querySelector('#download-link');
   exportBtn.addEventListener('click', () => {
     const json = store.exportJSON();
     const blob = new Blob([json], { type: 'application/json' });
     const url = URL.createObjectURL(blob);
-    
     downloadLink.href = url;
     downloadLink.download = 'attyre-backup.json';
     downloadLink.click();
-    
     URL.revokeObjectURL(url);
   });
 
-  // Import file
-  const importFile = container.querySelector('#import-file');
-  const importError = container.querySelector('#import-error');
-  const importSuccess = container.querySelector('#import-success');
-
-  // Display version
-  const versionEl = container.querySelector('#version-display');
-  if (versionEl) {
-    versionEl.textContent = APP_VERSION;
-  }
+  // Import
+  const importFile = wrap.querySelector('#import-file');
+  const importError = wrap.querySelector('#import-error');
+  const importSuccess = wrap.querySelector('#import-success');
 
   importFile.addEventListener('change', () => {
     importError.textContent = '';
     importSuccess.textContent = '';
-
     const file = importFile.files[0];
+    const importLabel = wrap.querySelector('#import-label');
+    if (importLabel) importLabel.textContent = file ? file.name : 'Choose file…';
     if (!file) return;
-
     const reader = new FileReader();
-    reader.onload = (event) => {
+    reader.onload = e => {
       try {
-        const jsonString = event.target.result;
-        const count = store.importJSON(jsonString);
-        importSuccess.textContent = `Successfully imported ${count} item${count !== 1 ? 's' : ''}.`;
-        
-        // Reload page to show new items
-        setTimeout(() => {
-          window.location.hash = '#/wardrobe';
-        }, 1000);
+        const count = store.importJSON(e.target.result);
+        importSuccess.textContent = `Imported ${count} item${count !== 1 ? 's' : ''} successfully.`;
+        setTimeout(() => { window.location.hash = '#/wardrobe'; }, 1000);
       } catch (err) {
         importError.textContent = `Error: ${err.message}`;
       }
     };
     reader.readAsText(file);
   });
+
+  // Version
+  wrap.querySelector('#version-display').textContent = APP_VERSION;
 }
diff --git a/js/pages/wardrobe.js b/js/pages/wardrobe.js
index 6788f4a..458a701 100644
--- a/js/pages/wardrobe.js
+++ b/js/pages/wardrobe.js
@@ -2,6 +2,7 @@
 
 import * as store from '../store.js';
 import { renderItemCard } from '../components/item-card.js';
+import { announceToScreenReader } from '../app.js';
 
 const ALL_WEATHER_TAGS = ['sunny','cloudy','rain','light-rain','heavy-rain','snow','wind','humid','foggy','cold','hot'];
 
@@ -98,8 +99,10 @@ export function renderWardrobe(container) {
 
     if (filtered.length === 0) {
       area.innerHTML = `<p style="text-align:center;color:var(--text-muted);padding:32px 0;font-size:14px">No items match your filters.</p>`;
+      announceToScreenReader('No items match your filters');
       return;
     }
+    announceToScreenReader(`${filtered.length} item${filtered.length !== 1 ? 's' : ''} shown`);
 
     const grid = document.createElement('div');
     grid.className = 'item-grid';
diff --git a/manifest.json b/manifest.json
index c9ef5e4..0352dae 100644
--- a/manifest.json
+++ b/manifest.json
@@ -2,7 +2,7 @@
   "name": "Attyre - Smart Wardrobe Manager",
   "short_name": "Attyre",
   "description": "A weather-aware outfit suggestion app that runs entirely in your browser. Manage your wardrobe and get weather-based outfit suggestions.",
-  "start_url": "/",
+  "start_url": "/index.html#/",
   "scope": "/",
   "display": "standalone",
   "orientation": "portrait-primary",
diff --git a/package.json b/package.json
index 78ad548..bd71e52 100644
--- a/package.json
+++ b/package.json
@@ -18,6 +18,6 @@
   "author": "AetherAssembly",
   "license": "AGPL-3.0",
   "devDependencies": {
-    "wrangler": "^4.85.0"
+    "wrangler": "^3.72.0"
   }
 }
diff --git a/style.css b/style.css
index 3436a61..01a4e32 100644
--- a/style.css
+++ b/style.css
@@ -84,7 +84,32 @@
   --success:       #03AF7A;
   --warning:       #DE8F05;
   --error:         #8B4513;
+  --border:        #8A7A6C;
+  font-size: 16px;
+}
+
+:root.accessibility-mode :focus-visible {
+  outline-width: 4px;
+}
+
+:root.accessibility-mode .sidebar-nav-item svg,
+:root.accessibility-mode .bottom-nav .nav-item svg {
+  stroke-width: 2.2;
+}
+
+/* ── Skip link ───────────────────────────────────────────── */
+.skip-link {
+  position: absolute;
+  left: -9999px;
+  top: 0;
+  z-index: 9999;
+  padding: 8px 16px;
+  background: var(--accent);
+  color: white;
+  font-weight: 700;
+  border-radius: 0 0 var(--radius-md) 0;
 }
+.skip-link:focus { left: 0; }
 
 /* ── Reset ───────────────────────────────────────────────── */
 *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
@@ -106,6 +131,7 @@ button { font-family: var(--font); }
 /* ── App Shell (desktop: sidebar + main) ─────────────────── */
 .app-shell {
   display: flex;
+  height: 100vh;
   height: 100dvh;
   overflow: hidden;
 }
@@ -545,6 +571,14 @@ p  { color: var(--text-secondary); line-height: 1.65; margin-bottom: 12px; }
   }
 }
 
+button.item-card {
+  width: 100%;
+  text-align: left;
+  font-family: var(--font);
+  -webkit-appearance: none;
+  appearance: none;
+}
+
 .item-card {
   background: var(--bg-surface);
   border: 1px solid var(--border);
@@ -672,6 +706,14 @@ select:focus {
   box-shadow: 0 0 0 3px rgba(201,169,110,0.18);
 }
 
+/* ── Global keyboard focus ring ──────────────────────────── */
+:focus-visible {
+  outline: 3px solid var(--accent);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
+}
+:focus:not(:focus-visible) { outline: none; }
+
 select {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A6B5D' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
   background-repeat: no-repeat;
@@ -1475,6 +1517,34 @@ button:disabled,
 
 .settings-row:last-child { border-bottom: none; }
 
+a.settings-link-row {
+  cursor: pointer;
+  border-radius: var(--radius-sm);
+  transition: background 0.15s;
+  margin: 0 -8px;
+  padding-left: 8px;
+  padding-right: 8px;
+}
+a.settings-link-row:hover {
+  background: var(--bg-subtle);
+}
+
+.settings-link-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-md);
+  background: var(--bg-subtle);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--text-secondary);
+}
+.settings-link-icon svg {
+  width: 15px;
+  height: 15px;
+}
+
 .settings-row-label {
   font-size: 14px;
   font-weight: 500;
@@ -1670,4 +1740,12 @@ input[type="date"] {
     transform: translateY(0);
     opacity: 1;
   }
-}
\ No newline at end of file
+}
+/* ── Reduced motion ──────────────────────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
diff --git a/wrangler.jsonc b/wrangler.jsonc
index 1ff560d..2306074 100644
--- a/wrangler.jsonc
+++ b/wrangler.jsonc
@@ -8,7 +8,7 @@
   "assets": {
     "directory": ".",
     "include": ["index.html", "style.css", "manifest.json", "js/**/*", "assets/**/*", "*.html", "*.svg"],
-    "exclude": ["node_modules", ".git", ".github", ".claude", "*.md", "*.test.js", "*.json", "package.json", "wrangler.jsonc"]
+    "exclude": ["node_modules", ".git", ".github", "*.md", "*.test.js", "*.json", "package.json", "wrangler.jsonc"]
   },
   "compatibility_flags": [
     "nodejs_compat"