<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
    <link rel="shortcut icon" href="/assets/favicon.ico">
    <link rel="manifest" href="/assets/site.webmanifest">
    <meta name="theme-color" content="#0f172a">
    <meta name="msapplication-TileColor" content="#0f172a">
    <meta name="msapplication-TileImage" content="/assets/mstile-150x150.png">
    <title>Winchester UK: find, compare, book and hire</title>
    <meta name="description" content="Practical Winchester district directory for independent food, trades, family days and staying overnight, with parking and Park &amp; Ride as trip glue.">
    <meta name="robots" content="index,follow,max-image-preview:large">
    <link rel="canonical" href="https://winchesteruk.com/">
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="WinchesterUK">
    <meta property="og:title" content="Winchester UK: find, compare, book and hire">
    <meta property="og:description" content="Practical Winchester district directory for independent food, trades, family days and staying overnight, with parking and Park &amp; Ride as trip glue.">
    <meta property="og:url" content="https://winchesteruk.com/">
    <meta property="og:image" content="https://winchesteruk.com/assets/logo_full_size.png">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Winchester UK: find, compare, book and hire">
    <meta name="twitter:description" content="Practical Winchester district directory for independent food, trades, family days and staying overnight, with parking and Park &amp; Ride as trip glue.">
    <meta name="twitter:image" content="https://winchesteruk.com/assets/logo_full_size.png">
    <script type="application/ld+json">{"@context":"https://schema.org","@graph":[{"@context":"https://schema.org","@type":"WebSite","description":"Find, compare, book and hire in Winchester, Hampshire, UK — independents, trades and Plan pages for parking","name":"WinchesterUK","potentialAction":{"@type":"SearchAction","query-input":"required name=search_term_string","target":"https://winchesteruk.com/search?q={search_term_string}"},"url":"https://winchesteruk.com/"},{"@type":"BreadcrumbList","itemListElement":[]}]}</script>
    
<style>
    .today-board {
        --civic-ink: #122f2c;
        --civic-green: #176b5b;
        --civic-mint: #dcece5;
        --civic-paper: #f5f0e4;
        --civic-rule: #cfd8d2;
        margin: 0 0 2.5rem;
        border: 1px solid #b9c9c2;
        border-radius: 18px;
        overflow: hidden;
        background: #fbfdfc;
        box-shadow: 0 24px 64px rgba(18, 47, 44, .10);
    }
    .today-masthead {
        display: grid;
        grid-template-columns: minmax(0, 1.25fr) minmax(17rem, .75fr);
        gap: 1.5rem;
        padding: clamp(1.4rem, 4vw, 2.8rem);
        color: #fff;
        background: var(--civic-ink);
        background-image: radial-gradient(circle at 85% 15%, rgba(124, 207, 175, .18), transparent 28%), linear-gradient(120deg, rgba(255,255,255,.03), transparent 55%);
    }
    .today-eyebrow { margin: 0 0 .5rem; color: #a9d9c9; font-size: .72rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
    .today-masthead h2 { max-width: 15ch; margin: 0; color: #fff; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2rem, 5vw, 3.7rem); line-height: .98; letter-spacing: -.045em; }
    .today-masthead .intro { max-width: 52ch; margin: 1rem 0 0; color: #d5e8e1; }
    .journey-form { align-self: end; padding: 1rem; border: 1px solid rgba(255,255,255,.16); border-radius: 14px; background: rgba(255,255,255,.07); backdrop-filter: blur(16px); }
    .journey-form label { display: block; margin: 0 0 .4rem; color: #d5e8e1; font-size: .78rem; font-weight: 750; }
    .journey-form-row { display: grid; grid-template-columns: 1fr auto; gap: .55rem; }
    .journey-form select { min-width: 0; width: 100%; padding: .72rem .8rem; border: 1px solid #8fb2a6; border-radius: 9px; background: #fff; color: var(--civic-ink); font: inherit; }
    .journey-form button, .location-button { min-height: 44px; padding: .7rem .9rem; border: 0; border-radius: 9px; font: 750 .86rem/1 system-ui; cursor: pointer; transition: transform 100ms ease-out, background 140ms ease-out; }
    .journey-form button { background: #f4cb67; color: #2d2a17; }
    .journey-form button:active, .location-button:active { transform: scale(.97); }
    .location-button { width: 100%; margin-top: .6rem; border: 1px solid rgba(255,255,255,.26); background: transparent; color: #fff; }
    .location-note { min-height: 1.3em; margin: .55rem 0 0; color: #bcd9cf; font-size: .74rem; }
    .today-result { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(15rem, .8fr); gap: 0; }
    .recommendation-copy { padding: clamp(1.3rem, 4vw, 2.4rem); border-right: 1px solid var(--civic-rule); }
    .result-label { display: inline-flex; gap: .4rem; align-items: center; margin-bottom: .75rem; color: var(--civic-green); font-size: .72rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
    .result-label::before { width: .55rem; height: .55rem; border-radius: 50%; background: #d39c24; content: ""; }
    .recommendation-copy h3 { margin: 0; color: var(--civic-ink); font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.6rem, 3vw, 2.35rem); letter-spacing: -.025em; }
    .recommendation-copy .summary { max-width: 62ch; color: #385b56; font-size: 1.03rem; }
    .recommendation-action { margin: 1.25rem 0 0; padding: 1rem 1.1rem; border-left: 4px solid var(--civic-green); background: var(--civic-mint); color: #173d36; }
    .result-facts { display: grid; align-content: start; margin: 0; padding: 1.25rem 1.4rem; background: var(--civic-paper); }
    .result-facts div { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid #d9d1bf; }
    .result-facts div:last-child { border-bottom: 0; }
    .result-facts dt { color: #6e6757; font-size: .78rem; }
    .result-facts dd { margin: 0; color: #2b352f; font: 700 .8rem/1.4 ui-monospace, monospace; text-align: right; }
    .parking-ledger { padding: 0 clamp(1.3rem, 4vw, 2.4rem) 2rem; }
    .parking-ledger h3 { margin-top: 1.5rem; font-size: 1rem; }
    .ledger-row { display: grid; grid-template-columns: minmax(10rem, 1fr) 8rem 6rem; gap: 1rem; align-items: center; padding: .85rem 0; border-top: 1px solid var(--civic-rule); }
    .ledger-row strong { color: var(--civic-ink); }
    .ledger-meta { color: #637a74; font-size: .78rem; }
    .pressure { justify-self: end; padding: .25rem .55rem; border-radius: 999px; font-size: .72rem; font-weight: 800; }
    .pressure-high, .pressure-closed { background: #f8d8d2; color: #8b251d; }
    .pressure-busy { background: #f7e5b3; color: #6d4d00; }
    .pressure-moderate { background: #deebe6; color: #245f54; }
    .pressure-lower { background: #d8ecdc; color: #235b2d; }
    .evidence-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: .55rem; margin: 0 0 2.5rem; }
    .source-chip { padding: .75rem .85rem; border: 1px solid var(--border); border-radius: 9px; background: #fff; }
    .source-chip strong, .source-chip span { display: block; }
    .source-chip strong { font-size: .78rem; }
    .source-chip span { margin-top: .2rem; color: var(--text-muted); font-size: .7rem; }
    .source-chip.stale { border-color: #d6a838; background: #fffaf0; }
    .notice-list { display: grid; gap: .7rem; }
    .notice-row { padding: 1rem 0; border-top: 1px solid var(--border); }
    .notice-row:first-child { border-top: 0; }
    .notice-row strong { color: #7c281e; }
    .proof-note { color: var(--text-muted); font-size: .76rem; }
    @media (max-width: 760px) {
        .today-masthead, .today-result { grid-template-columns: 1fr; }
        .recommendation-copy { border-right: 0; border-bottom: 1px solid var(--civic-rule); }
        .ledger-row { grid-template-columns: 1fr auto; }
        .ledger-row .ledger-meta { grid-column: 1 / -1; }
    }
    @media (prefers-reduced-motion: reduce) {
        .journey-form button, .location-button { transition: none; }
    }
    @media (prefers-reduced-transparency: reduce) {
        .journey-form { background: #244b46; backdrop-filter: none; }
    }
</style>

    <style>
        :root {
            color-scheme: light;
            --border: #e2e8f0;
            --surface: #f8fafc;
            --surface-hover: #f1f5f9;
            --accent: #0f172a;
            --text-main: #0f172a;
            --text-muted: #64748b;
            --primary: #2563eb;
        }
        * { box-sizing: border-box; }
        .skip-link { position: fixed; z-index: 200; top: .5rem; left: .5rem; padding: .7rem 1rem; background: var(--accent); color: #fff; border-radius: 6px; transform: translateY(-150%); }
        .skip-link:focus { transform: translateY(0); color: #fff; }
        body {
            margin: 0;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background: #fff;
            color: var(--text-main);
            line-height: 1.5;
        }

        /* Typography */
        h1, h2, h3 { line-height: 1.2; font-weight: 700; color: var(--text-main); }
        h1 { font-size: 2rem; margin-bottom: 0.5rem; letter-spacing: -0.025em; }
        h2 { font-size: 1.5rem; margin-top: 2rem; margin-bottom: 1rem; letter-spacing: -0.025em; }
        p { margin-bottom: 1rem; }
        a { color: var(--primary); text-decoration: none; transition: color 0.15s; }
        a:hover { color: #1d4ed8; text-decoration: underline; }

        /* Header Structure */
        .site-header {
            border-bottom: 1px solid var(--border);
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(8px);
            position: sticky;
            top: 0;
            z-index: 50;
        }
        .header-inner {
            max-width: 1400px;
            margin: 0 auto;
            padding: 0.75rem 1rem;
        }
        .header-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 2rem;
            margin-bottom: 0.75rem;
        }

        /* Brand */
        .brand-container {
            display: flex;
            align-items: center;
            gap: 1rem;
            text-decoration: none;
        }
        .brand-container:hover { text-decoration: none; }
        .brand-logo img {
            height: 58px;
            width: auto;
            display: block;
        }
        .brand-info {
            display: flex;
            flex-direction: column;
        }
        .brand-name {
            font-weight: 700;
            font-size: 1.25rem;
            color: var(--text-main);
            line-height: 1.1;
        }
        .brand-tagline {
            font-size: 0.8rem;
            color: var(--text-muted);
            font-weight: 500;
        }

        /* Search */
        .search-container {
            flex: 1;
            max-width: 480px;
            position: relative;
        }
        .search-input-wrapper {
            position: relative;
            display: flex;
            align-items: center;
        }
        .search-icon {
            position: absolute;
            left: 1rem;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-muted);
            pointer-events: none;
            z-index: 10;
            width: 18px;
            height: 18px;
        }
        .search-nav input {
            width: 100%;
            padding: 0.6rem 1rem 0.6rem 3rem;
            border: 1px solid var(--border);
            border-radius: 8px;
            font-size: 0.95rem;
            background: var(--surface);
            transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 1px 2px rgba(0,0,0,0.05);
            appearance: none;
            -webkit-appearance: none;
        }
        /* Remove default search decoration in WebKit */
        .search-nav input::-webkit-search-decoration,
        .search-nav input::-webkit-search-cancel-button,
        .search-nav input::-webkit-search-results-button,
        .search-nav input::-webkit-search-results-decoration {
            display: none;
        }
        .search-nav input:hover {
            border-color: #cbd5e1;
            background: #fff;
        }
        .search-nav input:focus {
            outline: none;
            border-color: var(--primary);
            background: #fff;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15), 0 1px 2px rgba(0,0,0,0.05);
        }

        /* Search Results Dropdown */
        .instant-search-results {
            position: absolute;
            top: calc(100% + 0.5rem);
            left: 0;
            right: 0;
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 8px;
            box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /* Deeper shadow */
            max-height: 300px;
            overflow-y: auto;
            z-index: 100;
            display: none;
            opacity: 0;
            transform: translateY(-5px);
            transition: opacity 0.2s, transform 0.2s;
        }
        .instant-search-results.visible {
            display: block;
            opacity: 1;
            transform: translateY(0);
        }
        .instant-search-item {
            display: block;
            padding: 0.75rem 1rem;
            border-bottom: 1px solid var(--border);
            color: var(--text-main);
            text-decoration: none;
            transition: background 0.1s;
        }
        .instant-search-item:hover { background: var(--surface-hover); text-decoration: none; }
        .instant-search-item:last-child { border-bottom: none; }
        .instant-search-heading {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.9rem;
            margin-bottom: 0.25rem;
        }
        .instant-search-heading strong { font-weight: 600; color: var(--primary); }
        .instant-search-heading span { font-size: 0.75rem; color: var(--text-muted); background: var(--surface); padding: 0.15rem 0.5rem; border-radius: 999px; border: 1px solid var(--border); }
        .instant-search-item p { margin: 0; font-size: 0.85rem; color: var(--text-muted); line-height: 1.4; }
        .instant-search-empty { padding: 1.5rem; text-align: center; color: var(--text-muted); font-size: 0.9rem; }

        /* Desktop Navigation */
        .nav-bar {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
            padding-top: 0.5rem;
            border-top: 1px solid var(--border);
        }
        .nav-link {
            font-size: 0.9rem;
            font-weight: 500;
            color: var(--text-main);
            padding: 0.4rem 0.75rem;
            border-radius: 6px;
            transition: background 0.15s;
            text-decoration: none;
        }
        .nav-link:hover {
            background: var(--surface-hover);
            color: var(--primary);
            text-decoration: none;
        }
        .nav-link.active {
            background: #eff6ff;
            color: var(--primary);
        }
        .breadcrumbs { margin: 0 0 1rem; color: var(--text-muted); font-size: .82rem; }
        .breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
        .breadcrumbs li:not(:last-child)::after { margin-left: .35rem; content: "/"; color: #94a3b8; }
        .mobile-contents { display: none; }

        /* Mobile Toggle */
        .mobile-menu-toggle {
            display: none;
            background: none;
            border: none;
            padding: 0.5rem;
            color: var(--text-main);
            cursor: pointer;
        }

        /* Layout Grid */
        .layout-container {
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 240px minmax(0, 1fr) 280px;
            gap: 2rem;
            padding: 2rem 1rem;
        }

        /* Page Header */
        .page-header {
            margin-bottom: 2rem;
            border-bottom: 1px solid var(--border);
            padding-bottom: 1.5rem;
        }
        .lead {
            font-size: 1.15rem;
            color: var(--text-muted);
            max-width: 65ch;
            margin-bottom: 0;
            line-height: 1.6;
        }

        /* Sidebar & Cards */
        aside h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-top: 0; }
        aside ul { list-style: none; padding: 0; margin: 0; }
        aside li { margin-bottom: 0.5rem; }
        aside li a { display: block; color: var(--text-main); text-decoration: none; font-size: 0.95rem; }
        aside li a:hover { color: var(--primary); }

        .sidebar-sticky { position: sticky; top: 100px; }

        .updates-card { margin-top: 2rem; padding: 1.1rem 1.1rem 1rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
        .updates-eyebrow { margin: 0 0 .3rem; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
        .updates-card .updates-title { margin: 0 0 .35rem; font-size: 1.05rem; text-transform: none; letter-spacing: -.01em; color: var(--text-main); }
        .updates-desc { margin: 0 0 .9rem; font-size: .88rem; line-height: 1.5; color: var(--text-muted); }
        .updates-form { display: grid; gap: .6rem; }
        .updates-field label { display: grid; gap: .3rem; font-size: .82rem; font-weight: 600; color: var(--text-main); }
        .updates-field input { width: 100%; padding: .6rem .7rem; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; font: inherit; font-size: .9rem; color: var(--text-main); }
        .updates-field input:focus { outline: 2px solid #93c5fd; outline-offset: 1px; border-color: var(--primary); }
        .updates-field input::placeholder { color: #94a3b8; }
        .turnstile-wrap { min-height: 0; margin: .1rem 0 0; }
        .updates-submit { width: 100%; padding: .65rem .9rem; border: 0; border-radius: 8px; background: var(--primary); color: #fff; font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; }
        .updates-submit:hover { background: #1d4ed8; }
        .updates-fine { margin: .1rem 0 0; font-size: .76rem; line-height: 1.5; color: var(--text-muted); }

        .card-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 1.5rem;
            margin-top: 1.5rem;
        }
        .card {
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 1.25rem;
            background: #fff;
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05);
            border-color: #cbd5e1;
        }
        .card header { margin-bottom: 1rem; }
        .badge {
            display: inline-flex;
            align-items: center;
            padding: 0.125rem 0.5rem;
            border-radius: 999px;
            font-size: 0.75rem;
            font-weight: 600;
            background: #f1f5f9;
            color: #475569;
        }
        .pill-row {
            display: inline-flex;
            gap: 0.35rem;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-end;
        }
        .stat {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.9rem;
            margin-bottom: 0.5rem;
            color: var(--text-main);
        }
        .stat span:last-child { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 500; }

        /* Footer */
        .site-footer {
            margin-top: 4rem;
            padding: 3rem 1rem;
            background: var(--surface);
            border-top: 1px solid var(--border);
            text-align: center;
        }
        .site-footer img { height: 40px; width: auto; margin-bottom: 1rem; opacity: 0.8; }
        .footer-note { font-size: 0.9rem; color: var(--text-muted); max-width: 500px; margin: 0 auto; }

        /* Responsive */
        @media (max-width: 1024px) {
            .layout-container {
                grid-template-columns: 200px 1fr;
            }
            .layout-container > aside:last-child {
                display: none;
            }
        }

        @media (max-width: 768px) {
            .site-header { position: relative; }
            .header-top { margin-bottom: 0; }
            .search-container { display: none; } /* Hide header search on mobile, rely on page search or menu search */

            /* Mobile Nav State */
            .nav-bar {
                display: none;
                flex-direction: column;
                width: 100%;
                position: absolute;
                top: 100%;
                left: 0;
                background: #fff;
                border-bottom: 1px solid var(--border);
                padding: 1rem;
                box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
            }
            .nav-bar.active { display: flex; }
            .nav-link { width: 100%; padding: 0.75rem; }

            .mobile-menu-toggle { display: block; margin-left: auto; }

            .layout-container { grid-template-columns: 1fr; gap: 1rem; }
            .layout-container > aside { display: none; }
            .sidebar-sticky { position: static; }
            .mobile-contents { display: block; margin: 0 0 1rem; padding: .75rem; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
            .mobile-contents summary { cursor: pointer; font-weight: 700; }
            .mobile-contents ul { margin-bottom: 0; }

            /* Re-add search inside nav for mobile? Or just rely on page content */
            .brand-name { font-size: 1.1rem; }
            .brand-tagline { display: none; }
        }
    </style>
</head>
<body>
    <a class="skip-link" href="#main-content">Skip to main content</a>
    <header class="site-header">
        <div class="header-inner">
            <div class="header-top">
                <a href="/" class="brand-container">
                    <div class="brand-logo">
                        <!-- Using smaller image via CSS resizing, assuming the file is high res -->
                        <img src="/assets/logomark_colour_full_size.png" alt="Winchester UK">
                    </div>
                    <div class="brand-info">
                        <span class="brand-name">Winchester UK</span>
                        <span class="brand-tagline">Find, compare, hire</span>
                    </div>
                </a>

                <form id="nav-search-form" class="search-container" action="/search" method="get">
                    <div class="search-input-wrapper">
                        <svg class="search-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                        <label class="sr-only" for="nav-search-input">Search</label>
                        <input id="nav-search-input" class="search-nav" type="search" name="q" autocomplete="off" placeholder="Search pubs, trades, parking...">
                    </div>
                    <div id="nav-search-results" class="instant-search-results" role="listbox"></div>
                </form>

                <button class="mobile-menu-toggle" type="button" aria-label="Open navigation" aria-expanded="false" aria-controls="main-nav">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>
                </button>
            </div>

            <nav id="main-nav" class="nav-bar">
                <a href="/eat" class="nav-link">Eat</a>
                <a href="/stay" class="nav-link">Stay</a>
                <a href="/do" class="nav-link">Do</a>
                <a href="/hire" class="nav-link">Hire</a>
                <a href="/plan" class="nav-link">Plan</a>
            </nav>
        </div>
    </header>

    <div class="layout-container">
        <aside>
            <div class="sidebar-sticky">
                <nav aria-label="On this page">
                    <h2>Contents</h2>
                    <ul>
                        
                        <li><a href="#main-content">Page overview</a></li>
                    </ul>
                </nav>

                
                <section class="updates-card" aria-labelledby="updates-title">
                    <p class="updates-eyebrow">Resident list &middot; Free</p>
                    <h2 id="updates-title" class="updates-title">Winchester updates</h2>
                    <p class="updates-desc">Short notes on parking, events and what&rsquo;s open. One email when it matters, unsubscribe anytime.</p>
                    <form class="updates-form" method="POST" action="/subscribe">
    <div class="updates-field">
        <label>Name<input name="name" type="text" autocomplete="name" maxlength="120" placeholder="Your name" required></label>
    </div>
    <div class="updates-field">
        <label>Email<input name="email" type="email" autocomplete="email" inputmode="email" maxlength="254" placeholder="you@example.com" required></label>
    </div>
    
    <div class="turnstile-wrap">
        <div class="cf-turnstile" data-sitekey="0x4AAAAAAE1xAhvWjwdrv8OD"></div>
    </div>
    
    <button class="updates-submit" type="submit">Join updates</button>
    <p class="updates-fine">Resident list only. Unsubscribe anytime. Run a business? <a href="/owners">Winchester Owners</a> is separate.</p>
</form>
                </section>
                
            </div>
        </aside>

        <main id="main-content" tabindex="-1">
            
            
            <header class="page-header">
                <h1>Find, compare, book and hire in Winchester</h1>
                
                <p class="lead">The practical city-and-district site — independents, trades, market towns and Plan pages for parking. Not a Visit Winchester clone.</p>
                
            </header>

            
<section aria-labelledby="directory-title">
    <h2 id="directory-title">Find, compare, hire</h2>
    <p>Independent food, trades, family days and overnight stays across Winchester district. Parking and Park &amp; Ride sit under Plan, not as the product.</p>
    <p><a href="/eat">Eat</a> · <a href="/stay">Stay</a> · <a href="/do">Do</a> · <a href="/hire">Hire</a> · <a href="/plan">Plan</a> · <a href="/alresford">Alresford</a> · <a href="/wickham">Wickham</a> · <a href="/bishops-waltham">Bishop’s Waltham</a></p>
    
    <ul class="record-list" style="list-style:none;padding:0;margin:1rem 0 2rem;">
        
        <li style="padding:.85rem 0;border-top:1px solid var(--border);">
            <strong><a href="/eat/bishop-on-the-bridge">Bishop on the Bridge</a></strong>
            <span style="display:block;color:var(--text-muted);font-size:.84rem;">Pub · ££ · 1 High Street, Winchester, Hampshire, SO23 9JX</span>
        </li>
        
        <li style="padding:.85rem 0;border-top:1px solid var(--border);">
            <strong><a href="/hire/chimclear">Chimclear Chimney Services</a></strong>
            <span style="display:block;color:var(--text-muted);font-size:.84rem;">Chimney sweep · £ · 7 Orchard Close, South Wonston, Winchester, Hampshire, SO21 3EY</span>
        </li>
        
        <li style="padding:.85rem 0;border-top:1px solid var(--border);">
            <strong><a href="/eat/cobbs-farm-shop-winchester">Cobbs Farm Shop &amp; Kitchen Winchester</a></strong>
            <span style="display:block;color:var(--text-muted);font-size:.84rem;">Farm shop · ££ · Springvale Road, Headbourne Worthy, Winchester, Hampshire, SO23 7LD</span>
        </li>
        
        <li style="padding:.85rem 0;border-top:1px solid var(--border);">
            <strong><a href="/hire/drain-division-winchester">Drain Division Winchester</a></strong>
            <span style="display:block;color:var(--text-muted);font-size:.84rem;">Drainage and septic · ££ · Winchester, Hampshire, SO23</span>
        </li>
        
        <li style="padding:.85rem 0;border-top:1px solid var(--border);">
            <strong><a href="/eat/hampshire-pantry">Hampshire Pantry</a></strong>
            <span style="display:block;color:var(--text-muted);font-size:.84rem;">Farm shop · ££ · Bushfield Farm, Badger Farm Road, Winchester, Hampshire, SO22 4QB</span>
        </li>
        
        <li style="padding:.85rem 0;border-top:1px solid var(--border);">
            <strong><a href="/hire/hampshire-plumbing">Hampshire Plumbing</a></strong>
            <span style="display:block;color:var(--text-muted);font-size:.84rem;">Plumber · ££ · Winchester, Hampshire, SO23</span>
        </li>
        
        <li style="padding:.85rem 0;border-top:1px solid var(--border);">
            <strong><a href="/hire/hampshire-sash-window-services">Hampshire Sash Window Services</a></strong>
            <span style="display:block;color:var(--text-muted);font-size:.84rem;">Sash windows · ££ · Alton, Hampshire, covering Winchester, GU34 1SX</span>
        </li>
        
        <li style="padding:.85rem 0;border-top:1px solid var(--border);">
            <strong><a href="/do/hattingley-valley">Hattingley Valley Wines</a></strong>
            <span style="display:block;color:var(--text-muted);font-size:.84rem;">Vineyard · £££ · Hattingley Valley, near Alresford, Hampshire, SO24</span>
        </li>
        
    </ul>
    
</section>

<section class="today-board" aria-labelledby="today-title">
    <div class="today-masthead">
        <div>
            <p class="today-eyebrow">Today in Winchester · evidence desk</p>
            <h2 id="today-title">Make the journey with fewer surprises.</h2>
            <p class="intro">Choose where you are going. We combine council notices, typical parking pressure, event timing and available bus data—without pretending historical parking is live.</p>
        </div>
        <form class="journey-form" method="get" action="/">
            <label for="destination">Where are you heading?</label>
            <div class="journey-form-row">
                <select id="destination" name="destination">
                    
                    <option value="city-centre" data-latitude="51.061" data-longitude="-1.313" selected>Winchester city centre</option>
                    
                    <option value="cathedral" data-latitude="51.0607" data-longitude="-1.3131" >Winchester Cathedral</option>
                    
                    <option value="station" data-latitude="51.0673" data-longitude="-1.3197" >Winchester railway station</option>
                    
                    <option value="hospital" data-latitude="51.0619" data-longitude="-1.329" >Royal Hampshire County Hospital</option>
                    
                    <option value="university" data-latitude="51.0594" data-longitude="-1.326" >University of Winchester</option>
                    
                    <option value="leisure" data-latitude="51.068" data-longitude="-1.303" >Winchester Sport and Leisure Park</option>
                    
                </select>
                <button type="submit">Check journey</button>
            </div>
            <button id="use-location" class="location-button" type="button">Use my location privately</button>
            <p id="location-note" class="location-note">Your location stays in this browser. It is never sent to WinchesterUK.</p>
        </form>
    </div>

    
    
    <div class="today-result" aria-live="polite">
        <div class="recommendation-copy">
            <span class="result-label">Winchester city centre · low confidence</span>
            <h3>Consider Park &amp; Ride</h3>
            <p class="summary">The historical outlook indicates pressure on central parking, but this is not live parking occupancy and no departure within 30 minutes is currently cached.</p>
            <p class="recommendation-action"><strong>Practical next step:</strong> Check the operator timetable before relying on Park &amp; Ride.</p>
        </div>
        <dl class="result-facts">
            <div><dt>Nearby event records</dt><dd>0</dd></div>
            <div><dt>Departure within 30 min</dt><dd>not cached</dd></div>
            <div><dt>Generated</dt><dd>2026-09-15T10:10:50.687237571+00:00</dd></div>
            <div><dt>Valid until</dt><dd>2026-09-15T10:40:50.687237571+00:00</dd></div>
        </dl>
    </div>
    <div class="parking-ledger">
        <h3>Ranked parking evidence</h3>
        
        
        <div class="ledger-row">
            <div><strong>Barfield Park &amp; Ride</strong><div class="ledger-meta">Park &amp; Ride · typical average — predictive, not live occupancy</div></div>
            <div class="ledger-meta">272 spaces</div>
            <span class="pressure pressure-busy">82% typical</span>
        </div>
        
        <div class="ledger-row">
            <div><strong>South Winchester Park &amp; Ride</strong><div class="ledger-meta">Park &amp; Ride · typical average — predictive, not live occupancy</div></div>
            <div class="ledger-meta">854 spaces</div>
            <span class="pressure pressure-busy">82% typical</span>
        </div>
        
        <div class="ledger-row">
            <div><strong>St Catherine’s Park &amp; Ride</strong><div class="ledger-meta">Park &amp; Ride · typical average — predictive, not live occupancy</div></div>
            <div class="ledger-meta">570 spaces</div>
            <span class="pressure pressure-busy">82% typical</span>
        </div>
        
        
    </div>
    
</section>

<section aria-labelledby="source-state-title">
    <h2 id="source-state-title">Source state</h2>
    <p>These are operational freshness signals, not decorative badges. Amber means the source is beyond its expected refresh window.</p>
    <div class="evidence-strip">
        
        <div class="source-chip stale"><strong>Winchester City Council events RSS</strong><span>healthy · Updated 10 Aug 2026 12:36 UTC · Winchester City Council events RSS</span></div>
        
        <div class="source-chip stale"><strong>Winchester City Council parking inventory</strong><span>healthy · Updated 10 Aug 2026 12:30 UTC · Winchester City Council parking inventory</span></div>
        
        <div class="source-chip stale"><strong>Winchester City Council car park updates</strong><span>healthy · Updated 10 Aug 2026 12:30 UTC · Winchester City Council car park updates</span></div>
        
        <div class="source-chip stale"><strong>Winchester City Council planning feed</strong><span>healthy · Updated 10 Aug 2026 12:30 UTC · Winchester City Council planning feed</span></div>
        
        <div class="source-chip stale"><strong>BODS live vehicle positions</strong><span>healthy · Updated 10 Aug 2026 12:30 UTC · BODS live vehicle positions</span></div>
        
    </div>
</section>

<section id="parking-updates" aria-labelledby="parking-updates-title">
    <h2 id="parking-updates-title">Confirmed car park notices</h2>
    
    <p>No active or upcoming restriction is present in the latest successfully parsed council update. This does not prove every space is available.</p>
    
</section>

<section id="parking">
    <h2>Official parking inventory</h2>
    <p>Capacity and bay types come from the council spreadsheet. They describe the car park, not how many bays are free now.</p>
    <div class="card-grid">
        
        <article class="card">
            <header class="stat"><strong><a href="/parking/29">Alresford Station</a></strong><span class="badge">Pay and Display</span></header>
            <div class="stat"><span>Standard spaces</span><span>105</span></div>
            <div class="stat"><span>Disabled</span><span>4</span></div>
            <div class="stat"><span>Electric</span><span>3</span></div>
            <div class="stat"><span>Pay by phone</span><span>42519</span></div>
        </article>
        
        <article class="card">
            <header class="stat"><strong><a href="/parking/68">Alresford Station</a></strong><span class="badge">Pay &amp; Display</span></header>
            <div class="stat"><span>Standard spaces</span><span>0</span></div>
            <div class="stat"><span>Disabled</span><span>0</span></div>
            <div class="stat"><span>Electric</span><span>3</span></div>
            <div class="stat"><span>Pay by phone</span><span>4</span></div>
        </article>
        
        <article class="card">
            <header class="stat"><strong><a href="/parking/30">Arlebury Park</a></strong><span class="badge">Pay and Display</span></header>
            <div class="stat"><span>Standard spaces</span><span>82</span></div>
            <div class="stat"><span>Disabled</span><span>4</span></div>
            <div class="stat"><span>Electric</span><span>1</span></div>
            <div class="stat"><span>Pay by phone</span><span>42521</span></div>
        </article>
        
        <article class="card">
            <header class="stat"><strong><a href="/parking/69">Arlebury Park</a></strong><span class="badge">Pay &amp; Display</span></header>
            <div class="stat"><span>Standard spaces</span><span>0</span></div>
            <div class="stat"><span>Disabled</span><span>0</span></div>
            <div class="stat"><span>Electric</span><span>0</span></div>
            <div class="stat"><span>Pay by phone</span><span>4</span></div>
        </article>
        
        <article class="card">
            <header class="stat"><strong><a href="/parking/5">Barfield</a></strong><span class="badge">Park and Ride</span></header>
            <div class="stat"><span>Standard spaces</span><span>190</span></div>
            <div class="stat"><span>Disabled</span><span>0</span></div>
            <div class="stat"><span>Electric</span><span>4</span></div>
            <div class="stat"><span>Pay by phone</span><span>2545</span></div>
        </article>
        
        <article class="card">
            <header class="stat"><strong><a href="/parking/22">Barfield Close</a></strong><span class="badge">Season Tickets only</span></header>
            <div class="stat"><span>Standard spaces</span><span>20</span></div>
            <div class="stat"><span>Disabled</span><span>0</span></div>
            <div class="stat"><span>Electric</span><span>0</span></div>
            <div class="stat"><span>Pay by phone</span><span>42515</span></div>
        </article>
        
    </div>
    <p class="proof-note"><a href="/parking">Explore all parking evidence</a> · Historical pressure is labelled “typical average”.</p>
</section>

<section id="events">
    <h2>Upcoming Winchester events</h2>
    <div class="card-grid">
        
        <article class="card"><header class="stat"><strong><a href="/events/96">Endless Summer VW show</a></strong><span class="badge">Council</span></header><p>Vicarage Farm Park, Woodmancott, SO21 3BL</p><small>Sun, 18 Jul 2027 10:00:00 GMT</small></article>
        
        <article class="card"><header class="stat"><strong><a href="/events/95">The Christmas Orchestra</a></strong><span class="badge">Council</span></header><p>Winchester Guildhall, Winchester, SO23 9GH</p><small>Fri, 11 Dec 2026 17:15:00 GMT</small></article>
        
        <article class="card"><header class="stat"><strong><a href="/events/94">Christmas at Abbey House, Winchester guided tour</a></strong><span class="badge">Council</span></header><p>The Guildhall, Winchester, SO23 9GH</p><small>Wed, 02 Dec 2026 14:30:00 GMT</small></article>
        
        <article class="card"><header class="stat"><strong><a href="/events/93">International Day for the Elimination of Violence Against Women Vigil</a></strong><span class="badge">Council</span></header><p>Buttercross, Winchester , SO23 9AH</p><small>Wed, 25 Nov 2026 17:00:00 GMT</small></article>
        
        <article class="card"><header class="stat"><strong><a href="/events/92">Privies, Pots and Pits: not a bog standard guided walking tour!</a></strong><span class="badge">Council</span></header><p>The Guildhall, Winchester, SO23 9GH</p><small>Thu, 19 Nov 2026 10:30:00 GMT</small></article>
        
        <article class="card"><header class="stat"><strong><a href="/events/91">Halloween guided walking tour of Winchester</a></strong><span class="badge">Council</span></header><p>Visitor Information Centre, Winchester, SO23 9GH</p><small>Sat, 31 Oct 2026 19:00:00 GMT</small></article>
        
    </div>
    <p><a href="/events">See all normalized events</a></p>
</section>

<section id="insights">
    <h2>How the evidence connects</h2>
    
    <article class="card"><strong>Event-day parking pressure</strong><p>6 upcoming event record(s) overlap a shopping quarter whose typical weekend peak is 95%. Consider Park &amp; Ride before travelling; this is a historical planning signal, not live occupancy.</p><small>historical + live event timing · Evidence: parking_forecasts: Shopping Quarter typical weekend peak · events: current normalized event records</small></article>
    
    <article class="card"><strong>Practical Park &amp; Ride recommendation</strong><p>Typical weekend pressure reaches 95% in the Shopping Quarter while Park &amp; Ride averages 27%; use a P&amp;R site and check the next departure when transport data is available.</p><small>predictive parking + transport join · Evidence: parking_forecasts: Shopping and Park &amp; Ride quarters · transit_departures: next-departure join point</small></article>
    
    <article class="card"><strong>Planning closures have a measurable parking effect</strong><p>A planning application affecting a car park should be compared with its normalized capacity before publishing a displacement estimate; businesses near the affected address are the next editorial join.</p><small>derived workflow guidance · Evidence: planning_applications: affected_asset · parking_locations: standard_spaces · businesses: editorial locations</small></article>
    
</section>

        </main>

        <aside class="right-sidebar">
             <div class="sidebar-sticky">
                <h2>Quick Links</h2>
                <ul>
                    <li><a href="/hire">Hire a trade</a></li>
                    <li><a href="/eat">Eat &amp; drink</a></li>
                    <li><a href="/plan">Plan parking</a></li>
                </ul>
             </div>
        </aside>
    </div>

    <footer class="site-footer">
        <img src="/assets/logo_full_size.png" alt="Winchester UK">
        <p class="footer-note">Winchester UK — find, compare and hire in Winchester, Hampshire, UK (SO23 and the district).<br><a href="/owners">Winchester Owners — weekly demand notes for local firms</a><br><a href="/developers">API &amp; developer guide</a> · <a href="/openapi.json">OpenAPI</a> · <a href="/llms.txt">Agent guide</a> · <a href="/health">Source health</a><br>Keyword priorities use directional UK estimates, not live Winchester search counts. Predictive parking values are typical historical averages, not live occupancy.</p>
    </footer>

    
<script>
(() => {
    const button = document.getElementById('use-location');
    const select = document.getElementById('destination');
    const note = document.getElementById('location-note');
    if (!button || !select || !note || !navigator.geolocation) return;
    const radians = value => value * Math.PI / 180;
    const distanceKm = (aLat, aLon, bLat, bLon) => {
        const dLat = radians(bLat - aLat);
        const dLon = radians(bLon - aLon);
        const a = Math.sin(dLat / 2) ** 2 + Math.cos(radians(aLat)) * Math.cos(radians(bLat)) * Math.sin(dLon / 2) ** 2;
        return 6371 * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
    };
    button.addEventListener('click', () => {
        button.textContent = 'Finding your location…';
        navigator.geolocation.getCurrentPosition(position => {
            const option = select.options[select.selectedIndex];
            const lat = Number(option.dataset.latitude);
            const lon = Number(option.dataset.longitude);
            const distance = distanceKm(position.coords.latitude, position.coords.longitude, lat, lon).toFixed(1);
            const route = `${position.coords.latitude},${position.coords.longitude};${lat},${lon}`;
            note.innerHTML = `You are about ${distance} km from ${option.text}. <a rel="noopener" href="https://www.openstreetmap.org/directions?engine=fossgis_osrm_car&route=${encodeURIComponent(route)}">Open directions on OSM</a>. Your coordinates leave this browser only if you follow that link.`;
            button.textContent = 'Location used in this browser';
        }, () => {
            note.textContent = 'Location was not shared. You can still use every recommendation.';
            button.textContent = 'Use my location privately';
        }, { enableHighAccuracy: false, timeout: 8000, maximumAge: 300000 });
    });
})();
</script>

    <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
    <script>
        document.addEventListener("DOMContentLoaded", () => {
            // Mobile Menu
            const toggle = document.querySelector('.mobile-menu-toggle');
            const nav = document.getElementById('main-nav');
            if(toggle && nav) {
                toggle.addEventListener('click', () => {
                    nav.classList.toggle('active');
                    const expanded = nav.classList.contains('active');
                    toggle.setAttribute('aria-expanded', expanded);
                    toggle.setAttribute('aria-label', expanded ? 'Close navigation' : 'Open navigation');
                    toggle.innerHTML = expanded
                        ? '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>'
                        : '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line></svg>';
                });
            }

            // Search
            const form = document.getElementById("nav-search-form");
            const input = document.getElementById("nav-search-input");
            const results = document.getElementById("nav-search-results");

            // Add keyboard shortcut
            document.addEventListener('keydown', (e) => {
                if (e.key === '/' && document.activeElement !== input) {
                    e.preventDefault();
                    input.focus();
                }
            });

            if (form && input && results) {
                let controller;
                const clearResults = () => { results.innerHTML = ""; results.classList.remove("visible"); };

                input.addEventListener("input", () => {
                    const query = input.value.trim();
                    if (!query) return clearResults();

                    if (controller) controller.abort();
                    controller = new AbortController();

                    fetch(`/api/search?q=${encodeURIComponent(query)}&limit=5`, { signal: controller.signal })
                        .then(res => res.ok ? res.json() : [])
                        .then(data => {
                            results.innerHTML = "";
                            if (!data.length) {
                                results.innerHTML = '<div class="instant-search-empty">No matches found.</div>';
                            } else {
                                data.forEach(item => {
                                    const a = document.createElement('a');
                                    a.className = 'instant-search-item';
                                    a.href = item.url;
                                    a.innerHTML = `<div class="instant-search-heading"><strong>${item.title}</strong><span>${item.category}</span></div><p>${item.snippet}</p>`;
                                    results.appendChild(a);
                                });
                            }
                            results.classList.add("visible");
                        })
                        .catch(err => { if (err.name !== 'AbortError') clearResults(); });
                });

                // Close on click outside
                document.addEventListener('click', (e) => {
                    if (!form.contains(e.target)) clearResults();
                });
            }
        });
    </script>
</body>
</html>