/* =========================================================
   Sunday.je
   Main stylesheet
   ========================================================= */


/* ---------------------------------------------------------
   Motion tokens (Emil Kowalski's design-engineering curves —
   see .agents/skills/emil-design-eng). Every transition/animation
   added in this pass reads from these instead of inventing a new
   curve or duration. Built-in CSS easings are too weak for
   deliberate UI motion; these carry more "snap".
   --------------------------------------------------------- */

:root {
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

    --duration-press: 140ms;
    --duration-fast: 180ms;
    --duration-base: 250ms;
    --duration-slow: 420ms;

    --shadow-sm: 0 1px 2px rgba(22, 32, 42, 0.04), 0 2px 6px rgba(22, 32, 42, 0.04);
    --shadow-md: 0 4px 12px rgba(22, 32, 42, 0.06), 0 12px 28px rgba(22, 32, 42, 0.06);
    --shadow-lg: 0 10px 24px rgba(22, 32, 42, 0.08), 0 24px 48px rgba(22, 32, 42, 0.08);

    /* Editorial serif (DESIGN.md, Editorial-Serif Rule): only for a
       named editorial job - the Sunday Pick masthead today. Every other
       heading is the sans stack. */
    --font-serif: Georgia, serif;

    /* Public page width system. --page-max is the shared frame every
       public header, section and footer lines up to; it grows in two
       steps on large monitors instead of stopping at laptop width.
       --read-max caps long-form prose so it never stretches with the
       frame. --page-gutter is the minimum side margin. */
    --page-max: 1180px;
    --read-max: 700px;
    --page-gutter: 20px;

    /* Public header heights (desktop / compact mobile). */
    --header-height: 86px;

    /* Terracotta. --terracotta is the brand accent (#C86F54): keep it
       for decorative, non-text accents. White text on it is only
       ~3.6:1, so primary action surfaces carrying white text or a
       white icon use --action instead: the same hue and saturation,
       only darker (white 4.78:1). --action-hover is one step deeper
       again for hover/press (white 5.47:1). */
    /* Small text on ivory/white/pale-sage surfaces: brand sage #617b6d
       and grey #7a8185 fall just short of AA (3.5-4.4:1), so text uses
       the deeper sage #4f6a5c (5.2:1+) and grey #666d72 (4.6:1+). The
       brand values stay for borders, fills and icons. */
    --terracotta: #c86f54;
    --action: #b85538;
    --action-hover: #ab4d30;
}

@media (min-width: 1600px) {
    :root {
        --page-max: 1320px;
    }
}

@media (min-width: 2400px) {
    :root {
        --page-max: 1440px;
    }
}

@media (max-width: 800px) {
    :root {
        --page-gutter: 14px;
        --header-height: 64px;
    }
}


/* ---------------------------------------------------------
   Base
   --------------------------------------------------------- */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #16202a;
    background: #faf9f6;
}

/* Public shell (core/base.html): header, main, footer stacked in a
   column at least one viewport tall, so a short page pushes the footer
   to the bottom of the window instead of leaving an ivory band under
   it. Long pages scroll as normal. dvh follows mobile browser chrome;
   the vh line is the fallback for browsers without it. */
.site-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.site-shell > main {
    flex: 1 0 auto;
}

img {
    display: block;
    max-width: 100%;
}

button,
input,
select {
    font: inherit;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
}

.container {
    width: min(var(--page-max), calc(100% - 2 * var(--page-gutter)));
    margin: 0 auto;
}

/* Browser surfaces: theme the parts we didn't draw, from the
   palette rather than leaving them at browser defaults. */
::selection {
    background: rgba(97, 123, 109, 0.28);
    color: #16202a;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ---------------------------------------------------------
   Focus states (WCAG 2.2 AA)
   --------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible {
    outline: 2px solid #617b6d;
    outline-offset: 2px;
    border-radius: 4px;
}

.explore-search input:focus-visible,
.explore-sheet-select:focus-visible {
    outline: none;
}

.search-box {
    transition:
        box-shadow var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out);
}


/* ---------------------------------------------------------
   Tappable defaults (mobile-native baseline) — every button/link
   gets immediate :active feedback instead of waiting for `click`,
   which is what makes a tap feel instant rather than laggy. Hover
   motion stays gated to capable pointers elsewhere in this file so
   touch never gets a hover state stuck on after a tap.
   --------------------------------------------------------- */

button,
a,
[role="button"] {
    touch-action: manipulation;
}

button,
.category-tile,
.category-now,
.business-button,
.detail-button,
.mobile-nav-toggle {
    -webkit-user-select: none;
    user-select: none;
}


/* ---------------------------------------------------------
   Header — one navy masthead for every public page. Deep Charcoal
   Navy is the site frame/navigation colour; Terracotta stays the
   primary action. Desktop keeps the tagline and the visible
   "For businesses" CTA; the compact mobile header drops both and the
   CTA lives once, inside the mobile menu.
   --------------------------------------------------------- */

.site-header {
    background: #16202a;
    color: #faf9f6;
}

.header-inner {
    height: var(--header-height);
    display: flex;
    align-items: center;
    gap: 40px;
}

/* Focus rings on the navy frame (header, mobile menu, footer): the
   site-wide sage ring is too dim against navy, so these use ivory. */
.site-header a:focus-visible,
.site-header button:focus-visible,
.site-footer a:focus-visible {
    outline-color: #faf9f6;
}

.logo {
    display: inline-block;
    margin-right: auto;
    color: #faf9f6;
    text-decoration: none;
}

.logo-wordmark {
    display: block;
}

.logo-monogram {
    display: none;
}

/* TEMPORARY light logo treatment. The approved wordmark PNG has no
   light/reversed variant yet, so this non-destructive filter renders
   it solid ivory-white on the navy header without touching the file.
   When the approved reversed asset arrives: point the <img> in
   core/base.html at it, drop its .logo-temp-light class, and delete
   this rule. */
.site-header .logo-temp-light,
.site-footer .logo-temp-light {
    filter: brightness(0) invert(1);
}

.logo span {
    display: block;
    margin-top: 4px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 600;
}

.main-nav {
    display: flex;
    gap: 32px;
}

/* 12px of vertical padding gives each link a 41px hit area; the
   underline sits 4px under the text as before. */
.main-nav a {
    position: relative;
    padding: 12px 0;
    color: #dbe1e4;
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
    transition: color var(--duration-fast) ease;
}

.main-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 8px;
    height: 1px;
    background: currentColor;
    transition: right var(--duration-base) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .main-nav a:hover {
        color: #faf9f6;
    }

    .main-nav a:hover::after {
        right: 0;
    }
}

.business-button {
    display: inline-block;
    background: var(--action);
    color: white;
    padding: 12px 20px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    transition:
        transform var(--duration-fast) var(--ease-out),
        background-color var(--duration-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .business-button:hover {
        transform: translateY(-1px);
    }
}

.business-button:active {
    transform: scale(0.97);
    transition-duration: var(--duration-press);
}


/* ---------------------------------------------------------
   Mobile Navigation — continues the navy header surface downward
   rather than dropping a white panel under it.
   --------------------------------------------------------- */

.mobile-nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid rgba(250, 249, 246, 0.3);
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    transition:
        transform var(--duration-press) var(--ease-out),
        border-color var(--duration-fast) ease;
}

.mobile-nav-toggle:active {
    transform: scale(0.94);
}

@media (hover: hover) and (pointer: fine) {
    .mobile-nav-toggle:hover {
        border-color: rgba(250, 249, 246, 0.6);
    }
}

.mobile-nav-toggle-bar {
    display: block;
    width: 18px;
    height: 2px;
    background: #faf9f6;
    border-radius: 1px;
    transition:
        transform var(--duration-base) var(--ease-in-out),
        opacity var(--duration-fast) ease;
}

.mobile-nav-toggle.is-open .mobile-nav-toggle-bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

.mobile-nav-toggle.is-open .mobile-nav-toggle-bar:nth-child(2) {
    opacity: 0;
}

.mobile-nav-toggle.is-open .mobile-nav-toggle-bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

.mobile-nav {
    display: none;
    flex-direction: column;
    padding-bottom: 18px;
    border-top: 1px solid rgba(250, 249, 246, 0.12);
    background: #16202a;
    transform-origin: top center;
    opacity: 0;
    transform: translateY(-6px) scaleY(0.98);
    transition:
        opacity var(--duration-base) var(--ease-out),
        transform var(--duration-base) var(--ease-out);
}

.mobile-nav.is-open {
    opacity: 1;
    transform: translateY(0) scaleY(1);
}

.mobile-nav a {
    padding: 16px var(--page-gutter);
    color: #dbe1e4;
    text-decoration: none;
    font-size: 17px;
    font-weight: 600;
    border-bottom: 1px solid rgba(250, 249, 246, 0.08);
    transition: color var(--duration-fast) ease, background var(--duration-fast) ease;
}

.mobile-nav a:focus-visible {
    outline-offset: -2px;
    color: #faf9f6;
    background: rgba(250, 249, 246, 0.06);
}

.mobile-nav a:active {
    background: rgba(250, 249, 246, 0.1);
}

@media (hover: hover) and (pointer: fine) {
    .mobile-nav a:hover {
        color: #faf9f6;
        background: rgba(250, 249, 246, 0.06);
    }
}

/* The one "For businesses" control on mobile: the same terracotta
   pill as the desktop header CTA, set apart below the page links. */
.mobile-nav .mobile-nav-business {
    align-self: flex-start;
    margin: 18px var(--page-gutter) 0;
    padding: 12px 20px;
    border: 0;
    border-radius: 24px;
    background: var(--action);
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
}

.mobile-nav .mobile-nav-business:focus-visible {
    outline-offset: 2px;
    color: #ffffff;
    background: var(--action);
}

@media (hover: hover) and (pointer: fine) {
    .mobile-nav .mobile-nav-business:hover {
        color: #ffffff;
    }
}


/* ---------------------------------------------------------
   Shared label style (eyebrow / kicker)
   --------------------------------------------------------- */

.eyebrow {
    margin: 0;
    color: #4f6a5c;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
}


/* ---------------------------------------------------------
   Section heading (shared by homepage sections)
   --------------------------------------------------------- */

.section-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 24px;
    margin-bottom: 28px;
}

.section-heading h2 {
    margin: 0;
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.025em;
}

.section-intro {
    margin: 8px 0 0;
    max-width: 52ch;
    color: #5b646b;
    font-size: 16px;
    line-height: 1.5;
}

.section-heading a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #4f6a5c;
    text-decoration: none;
    font-weight: 600;
    transition: gap var(--duration-fast) var(--ease-out);
}

.section-heading a::after {
    content: "→";
    transition: transform var(--duration-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .section-heading a:hover {
        text-decoration: underline;
    }

    .section-heading a:hover::after {
        transform: translateX(2px);
    }
}

/* Homepage "Open this Sunday": the utility list. Two columns of
   thumbnail rows on wider screens, one on mobile - deliberately a list,
   not a second image rail, so it never competes with the hero, the
   Ideas rail or Featured. Hairlines separate rows (a list, not boxes). */
.business-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 72px;
}

.business-card {
    display: grid;
    grid-template-columns: 148px minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    padding: 24px 0;
    border-top: 1px solid #ebe8e2;
}

.business-card-image {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    border-radius: 10px;
    background: #eef2eb;
}

.business-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .business-card:hover .business-card-image img {
        transform: scale(1.03);
    }

    .business-card:hover h3 a {
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}

.business-card-content {
    min-width: 0;
}

.business-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: #666d72;
    font-size: 13px;
}

.category-label {
    color: #4f6a5c;
    font-weight: 700;
}

.business-card h3 {
    margin: 8px 0 10px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

.business-card h3 a {
    color: inherit;
    text-decoration: none;
}

.business-card .opening-status {
    font-size: 14px;
}

.business-card p {
    margin: 0 0 18px;
    color: #697178;
    line-height: 1.5;
}

.opening-status {
    font-size: 13px;
    font-weight: 600;
}

.opening-status.open {
    color: #39704f;
}

.opening-status.closed {
    color: #9a4e42;
}

/* Before a venue's first opening today: not open yet, but not closed
   either - plain ink, never the closed red. */
.opening-status.upcoming {
    color: #16202a;
}

.opening-status-note {
    font-size: 12px;
    color: #697178;
    margin: 2px 0 0;
}

/* "Confirmed by the business" - deliberately quieter than the hours it
   sits under. Text is a deeper sage than brand #617b6d so 12px copy
   keeps AA contrast on the ivory background. */
.hours-confirmed {
    display: flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    margin-top: 8px;
    color: #4f6a5b;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
}

.hours-confirmed-icon {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    color: #617b6d;
}


/* ---------------------------------------------------------
   Business detail (businesses/business_detail.html). The top answers
   "can I go here this Sunday?": name, category/parish, the Sunday
   status and hours, then the actions - beside the place's photo or
   category illustration. Details below flow as typographic sections
   divided by hairlines, never boxed into cards.
   --------------------------------------------------------- */

.business-detail {
    padding: 16px 0 96px;
}

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    margin-bottom: 8px;
    color: #4f6a5c;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: gap var(--duration-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .back-link:hover {
        text-decoration: underline;
        text-underline-offset: 3px;
        gap: 9px;
    }
}

.business-hero {
    display: grid;
    gap: 24px;
}

/* Small screens: the image leads, edge to edge under the header. */
.business-hero-media {
    margin: 0 calc(-1 * var(--page-gutter));
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: #eef2eb;
}

.business-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* A photo credit required by its permission/licence: a small ivory label
   on a solid navy chip, so it stays legible on any photograph. */
.business-hero-media {
    position: relative;
}

.business-photo-credit {
    position: absolute;
    right: 10px;
    bottom: 10px;
    max-width: calc(100% - 20px);
    margin: 0;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(22, 32, 42, 0.78);
    color: #faf9f6;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

/* The category illustration prints its label along its top edge:
   anchor the crop to the bottom so the label falls outside the frame. */
.business-hero-media .is-art {
    object-position: 50% 100%;
}

.business-hero-main {
    min-width: 0;
}

.business-hero-meta {
    margin: 0;
    color: #5b646b;
    font-size: 14px;
    line-height: 1.4;
}

.business-name {
    margin: 10px 0 0;
    color: #16202a;
    font-size: clamp(36px, 4.6vw, 64px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.035em;
    overflow-wrap: break-word;
}

/* The Sunday answer: a date line, then the status large and in its
   status colour, then the hours. Prominent through type, not a banner. */
.business-sunday {
    margin-top: 22px;
}

.business-sunday-date {
    margin: 0 0 6px;
    color: #5b646b;
    font-size: 14px;
    font-weight: 600;
}

.business-sunday .opening-status {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: clamp(21px, 2vw, 25px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.015em;
}

.business-sunday .opening-status::before {
    content: "";
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: currentColor;
}

.business-sunday-hours {
    margin: 6px 0 0 20px;
    color: #16202a;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.4;
}

.business-sunday-hours--quiet {
    color: #5b646b;
    font-size: 16px;
    font-weight: 400;
}

.business-sunday .opening-status-note {
    margin: 6px 0 0 20px;
    font-size: 14px;
}

.business-sunday .hours-confirmed {
    margin: 10px 0 0 20px;
}

/* Research provenance ("Hours checked by Sunday.je on 2 October"): the
   quietest line in the block, below the hours and any badge. #5f676e on
   ivory is 5.5:1. */
.business-sunday .hours-provenance {
    margin: 8px 0 0 20px;
    font-size: 13px;
    line-height: 1.4;
    color: #5f676e;
}

/* Actions: thumb-sized pills. Directions is the primary step when there
   is somewhere to go (else the website); the rest stay outlined. */
.business-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.business-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 50px;
    padding: 0 20px;
    border: 1px solid #c9c6bf;
    border-radius: 999px;
    background: transparent;
    color: #16202a;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background-color var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out),
        transform var(--duration-press) var(--ease-out);
}

.business-action svg {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
}

@media (hover: hover) and (pointer: fine) {
    .business-action:hover {
        border-color: #16202a;
    }
}

.business-action:active {
    transform: scale(0.97);
}

.business-action--primary {
    border-color: var(--action);
    background: var(--action);
    color: #ffffff;
}

/* Sections: a label column and a reading column on wider screens,
   stacked on phones. Hairlines mark the rhythm. */
.business-sections {
    max-width: 980px;
    margin-top: 56px;
}

.business-section {
    display: grid;
    gap: 10px;
    padding: 28px 0;
    border-top: 1px solid #ebe8e2;
}

.business-section-title {
    margin: 0;
    color: #16202a;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.business-section-body > :first-child {
    margin-top: 0;
}

.business-section-body > :last-child {
    margin-bottom: 0;
}

.business-description {
    max-width: 62ch;
    margin: 0;
    color: #38434c;
    font-size: 18px;
    line-height: 1.65;
}

.business-features {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.business-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #16202a;
    font-size: 17px;
    line-height: 1.4;
}

/* A small drawn tick in sage - one quiet mark, as on For Businesses. */
.business-features li::before {
    content: "";
    flex-shrink: 0;
    width: 5px;
    height: 10px;
    margin: -3px 3px 0 4px;
    border: solid #4f6a5c;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.business-address,
.business-phone-text {
    margin: 0 0 8px;
    color: #16202a;
    font-size: 17px;
    line-height: 1.55;
}

.detail-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin-top: 10px;
    padding: 0 24px;
    background: var(--action);
    color: white;
    border: 0;
    border-radius: 999px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 700;
    transition:
        transform var(--duration-press) var(--ease-out),
        background-color var(--duration-fast) var(--ease-out);
}

.detail-button:active {
    transform: scale(0.97);
}

/* Owner claim: the last section, deliberately quiet - a consumer page
   first. Every claim state keeps its own copy and destination. */
.business-owner-cta-title {
    margin: 0 0 4px;
    color: #16202a;
    font-size: 16px;
    font-weight: 700;
}

.business-owner-cta-text {
    max-width: 56ch;
    margin: 0 0 10px;
    color: #5b646b;
    font-size: 15px;
    line-height: 1.55;
}

.business-owner-cta-text a {
    color: #4f6a5c;
    font-weight: 600;
}

.business-owner-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    color: #4f6a5c;
    font-size: 15px;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: rgba(79, 106, 92, 0.35);
    text-underline-offset: 4px;
    transition: text-decoration-color var(--duration-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
    .business-owner-cta-link:hover {
        text-decoration-color: currentColor;
    }
}

@media (min-width: 640px) {

    .business-hero-media {
        margin: 0;
        aspect-ratio: 16 / 9;
        border-radius: 20px;
    }

}

@media (min-width: 801px) {

    .business-detail {
        padding-top: 24px;
    }

    .business-sections {
        margin-top: 80px;
    }

    .business-section {
        grid-template-columns: 220px minmax(0, 1fr);
        gap: 40px;
        padding: 36px 0;
    }

    .business-section-title {
        padding-top: 2px;
    }

}

/* Desktop: the answer on the left, the image on the right - the same
   split as the homepage hero, on ivory. */
@media (min-width: 1024px) {

    .business-hero {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "main media";
        align-items: center;
        column-gap: clamp(48px, 5vw, 88px);
    }

    .business-hero--text-only {
        grid-template-columns: minmax(0, 760px);
        grid-template-areas: "main";
    }

    .business-hero-media {
        grid-area: media;
        aspect-ratio: 4 / 3;
        border-radius: 24px;
    }

    .business-hero-main {
        grid-area: main;
        padding: 12px 0;
    }

    /* Side by side the actions keep their natural widths. */
    .business-action {
        flex: 0 0 auto;
        padding: 0 18px;
        font-size: 15px;
    }

}


/* ---------------------------------------------------------
   Explore (businesses/explore.html) - a product page, not a banner:
   an ivory opening with a strong sans headline, the search as the
   dominant control (sticky for the whole list), quick categories
   attached beneath it, and results as an image-first discovery list
   separated by hairlines rather than boxed into cards.
   --------------------------------------------------------- */

.explore-hero {
    padding: 36px 0 18px;
}

.explore-kicker {
    margin: 0 0 10px;
    color: #4f6a5c;
    font-size: 13px;
    font-weight: 700;
}

.explore-title {
    margin: 0;
    color: #16202a;
    font-size: clamp(38px, 5.4vw, 68px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.035em;
}


/* Search band. Sticky across the whole list (its parent, .explore-page,
   wraps the results too). At rest it is simply part of the heading; once
   pinned (.is-stuck, set by explore.js) it gains a full-width white
   surface and a hairline so it reads as deliberate page chrome rather
   than a strip of page that happened to stop scrolling. */

.explore-search-band {
    position: sticky;
    top: 0;
    z-index: 30;
    padding: 10px 0;
    background: #faf9f6;
    border-bottom: 1px solid transparent;
    transition:
        background-color var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out);
}

.explore-search-band.is-stuck {
    background: #ffffff;
    border-bottom-color: #ebe8e2;
}

.explore-search-sentinel {
    height: 0;
}

.explore-search-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.explore-search {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    height: 56px;
    padding: 4px;
    border: 1px solid #d9d7d1;
    border-radius: 999px;
    background: #ffffff;
    transition:
        border-color var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out);
}

.explore-search:focus-within {
    border-color: #4f6a5c;
    box-shadow: 0 0 0 3px rgba(97, 123, 109, 0.22);
}

.explore-search-icon {
    position: absolute;
    top: 50%;
    left: 18px;
    width: 19px;
    height: 19px;
    transform: translateY(-50%);
    color: #5b646b;
    pointer-events: none;
}

.explore-search input {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 10px 0 44px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #16202a;
    font-size: 16px;
    outline: none;
}

.explore-search input::placeholder {
    color: #6b7378;
}

.explore-search-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    min-width: 46px;
    height: 46px;
    padding: 0 13px;
    border: 0;
    border-radius: 999px;
    background: var(--action);
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition:
        transform var(--duration-press) var(--ease-out),
        background-color var(--duration-fast) var(--ease-out);
}

.explore-search-submit svg {
    width: 19px;
    height: 19px;
}

.explore-search-submit-label {
    display: none;
}

.explore-search-submit:active {
    transform: scale(0.97);
}

/* Filters: secondary to search - an outlined control, never the
   terracotta action. Icon-only on small phones (its name stays in the
   accessible tree), with the active count as a small navy badge. */
.explore-filters-toggle {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 56px;
    min-width: 56px;
    padding: 0 20px;
    border: 1px solid #d9d7d1;
    border-radius: 999px;
    background: #ffffff;
    color: #16202a;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition:
        border-color var(--duration-fast) var(--ease-out),
        transform var(--duration-press) var(--ease-out);
}

.explore-filters-toggle svg {
    width: 18px;
    height: 18px;
}

@media (hover: hover) and (pointer: fine) {
    .explore-filters-toggle:hover {
        border-color: #16202a;
    }
}

.explore-filters-toggle:active {
    transform: scale(0.97);
}

.explore-filters-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #16202a;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
}


/* Quick categories + active filters: attached to the search, quieter. */

.explore-refine {
    padding: 4px 0 0;
}

.explore-chip-row {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 2px 0;
}

.explore-chip-row::-webkit-scrollbar {
    display: none;
}

.explore-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 18px;
    border: 1px solid #d9d7d1;
    border-radius: 999px;
    background: transparent;
    color: #16202a;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background-color var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out),
        color var(--duration-fast) var(--ease-out),
        transform var(--duration-press) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .explore-chip:hover {
        border-color: #16202a;
    }
}

.explore-chip:active {
    transform: scale(0.96);
}

.explore-chip.active {
    background: #617b6d;
    border-color: #617b6d;
    color: #ffffff;
}

.explore-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.explore-active-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 6px 10px 6px 14px;
    border-radius: 999px;
    background: #eef2eb;
    color: #46594d;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition:
        background-color var(--duration-fast) var(--ease-out),
        transform var(--duration-press) var(--ease-out);
}

.explore-active-filter-chip span[aria-hidden] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    font-size: 15px;
    line-height: 1;
}

@media (hover: hover) and (pointer: fine) {
    .explore-active-filter-chip:hover {
        background: #dfe8db;
    }
}

.explore-active-filter-chip:active {
    transform: scale(0.96);
}


/* ---------------------------------------------------------
   Explore results
   --------------------------------------------------------- */

.explore-results {
    padding: 28px 0 96px;
}

.explore-results-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 4px;
}

.explore-results-count {
    margin: 0;
    color: #5b646b;
    font-size: 15px;
}

.explore-results-count strong {
    color: #16202a;
    font-weight: 700;
}

.explore-results-tools {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.explore-sort {
    position: relative;
    flex-shrink: 0;
}

.explore-sort select {
    appearance: none;
    -webkit-appearance: none;
    height: 44px;
    padding: 0 36px 0 16px;
    border: 1px solid #d9d7d1;
    border-radius: 999px;
    background-color: transparent;
    color: #16202a;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    background-image:
        linear-gradient(45deg, transparent 50%, #16202a 50%),
        linear-gradient(135deg, #16202a 50%, transparent 50%);
    background-position:
        calc(100% - 21px) 19px,
        calc(100% - 16px) 19px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.explore-sort-apply {
    margin-left: 8px;
    height: 44px;
    padding: 0 16px;
    border: 1px solid #617b6d;
    border-radius: 999px;
    background: #617b6d;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
}

.explore-no-results {
    padding: 48px 0 24px;
    border-top: 1px solid #ebe8e2;
}

.explore-no-results h3 {
    margin: 0 0 8px;
    font-size: clamp(24px, 2.6vw, 30px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.explore-no-results p {
    margin: 0 0 16px;
    color: #5b646b;
}

.explore-no-results a {
    color: #4f6a5c;
    font-weight: 700;
    text-underline-offset: 3px;
}


/* Result rows: image first, then name, status, category/parish and
   features. Mobile keeps a real image (38% of the row, portrait) beside
   the text; desktop widens to a landscape image and a larger name. */

.explore-list {
    display: flex;
    flex-direction: column;
}

.explore-row {
    display: grid;
    grid-template-columns: 38% minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    padding: 18px 0;
    border-top: 1px solid #ebe8e2;
    color: inherit;
    text-decoration: none;
}

.explore-row:active {
    opacity: 0.85;
}

.explore-row-media {
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: 12px;
    background: #eef2eb;
}

.explore-row-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-out);
}

/* Category illustration (no business photo): each artwork prints its
   category label along its top edge; anchoring the crop to the bottom
   and scaling slightly keeps the label out of every frame shape. */
.explore-row-media .explore-fallback {
    object-position: 50% 100%;
    transform: scale(1.3);
    transform-origin: 50% 100%;
}

@media (hover: hover) and (pointer: fine) {
    .explore-row:hover .explore-row-name {
        text-decoration: underline;
        text-decoration-thickness: 2px;
        text-underline-offset: 4px;
    }

    .explore-row:hover .explore-row-media img {
        transform: scale(1.03);
    }

    .explore-row:hover .explore-row-media .explore-fallback {
        transform: scale(1.34);
    }
}

.explore-row-content {
    min-width: 0;
}

.explore-row-name {
    margin: 0 0 8px;
    color: #16202a;
    font-size: 19px;
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: -0.015em;
    overflow-wrap: anywhere;
}

.explore-row-status {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #39704f;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
}

.explore-row-status-dot {
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-top: 0.38em;
    border-radius: 50%;
    background: currentColor;
}

.explore-row-hours {
    font-weight: 600;
}

/* A time range never breaks in the middle ("12pm-" / "4:30pm"). */
.explore-row-period {
    white-space: nowrap;
}

/* Confirmed-hours line: aligned with the status text, past the dot. */
.explore-row-status + .hours-confirmed {
    margin-top: 6px;
    margin-left: 16px;
}

.explore-row-meta {
    margin: 10px 0 0;
    color: #5b646b;
    font-size: 14px;
    line-height: 1.4;
}

.explore-row-category {
    color: #4f6a5c;
    font-weight: 700;
}

.explore-row-features {
    margin: 4px 0 0;
    color: #666d72;
    font-size: 13px;
    line-height: 1.4;
}

.explore-fallback {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Show more: a plain closing line under the list, not a boxed band. */

.explore-load-more {
    margin-top: 0;
    padding: 32px 0 0;
    border-top: 1px solid #ebe8e2;
    text-align: center;
}

.explore-load-more p {
    margin: 0 0 14px;
    color: #5b646b;
    font-size: 14px;
}

.explore-load-more-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 48px;
    padding: 0 24px;
    border: 1px solid var(--action);
    border-radius: 999px;
    background: transparent;
    color: var(--action-hover);     /* 4.8:1 even on the darker results band; more on ivory */
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition:
        background-color var(--duration-fast) var(--ease-out),
        color var(--duration-fast) var(--ease-out),
        transform var(--duration-press) var(--ease-out);
}

.explore-load-more-button svg {
    width: 16px;
    height: 16px;
}

@media (hover: hover) and (pointer: fine) {
    .explore-load-more-button:hover {
        background: var(--action);
        color: #ffffff;
    }
}

.explore-load-more-button:active {
    transform: scale(0.97);
}

.explore-load-more-button[aria-busy="true"] {
    opacity: 0.6;
    pointer-events: none;
}


/* ---------------------------------------------------------
   Filter bottom sheet (<dialog>)
   --------------------------------------------------------- */

.explore-sheet {
    position: fixed;
    inset: auto 0 0 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    max-height: 88vh;
    padding: 0;
    border: 0;
    border-radius: 18px 18px 0 0;
    background: #faf9f6;
    color: #16202a;
}

/* A closed <dialog> is display:none by default (UA stylesheet) - that
   rule is only reliable as long as no author rule sets `display`
   unconditionally on it, so the flex layout is scoped to [open] only.
   Without this, the sheet stays laid out (and clickable/blocking)
   underneath everything else even while "closed". */
.explore-sheet[open] {
    display: flex;
    flex-direction: column;
    animation: explore-sheet-in var(--duration-base) var(--ease-out);
}

@keyframes explore-sheet-in {
    from {
        transform: translateY(24px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.explore-sheet::backdrop {
    background: rgba(22, 32, 42, 0.5);
}

.explore-sheet-handle {
    width: 40px;
    height: 4px;
    margin: 12px auto 0;
    border-radius: 2px;
    background: #d9d7d1;
    flex-shrink: 0;
}

.explore-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 22px 8px;
    flex-shrink: 0;
}

.explore-sheet-header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.explore-sheet-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.explore-sheet-clear {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: #4f6a5c;
    font-size: 15px;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.explore-sheet-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #d9d7d1;
    border-radius: 999px;
    background: transparent;
    color: #16202a;
    cursor: pointer;
}

.explore-sheet-close svg {
    width: 18px;
    height: 18px;
}

.explore-sheet-body {
    overflow-y: auto;
    padding: 6px 22px 22px;
    flex: 1;
}

.explore-sheet-section {
    border: 0;
    margin: 18px 0;
    padding: 0;
}

.explore-sheet-section > legend,
.explore-sheet-section > label {
    padding: 0;
    font-weight: 700;
    font-size: 16px;
    color: #16202a;
}

.explore-sheet-hint {
    margin: 3px 0 12px;
    color: #666d72;
    font-size: 14px;
}

.explore-sheet-divider {
    height: 1px;
    margin: 4px 0;
    background: #ebe8e2;
}

.explore-sheet-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.explore-pill {
    position: relative;
    cursor: pointer;
}

.explore-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.explore-pill span {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid #d9d7d1;
    border-radius: 999px;
    background: #ffffff;
    color: #16202a;
    font-size: 15px;
    font-weight: 600;
    transition:
        background-color var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out),
        color var(--duration-fast) var(--ease-out);
}

.explore-pill input:checked + span {
    background: #617b6d;
    border-color: #617b6d;
    color: #ffffff;
}

.explore-pill input:focus-visible + span {
    outline: 2px solid #617b6d;
    outline-offset: 2px;
}

.explore-sheet-select {
    width: 100%;
    height: 48px;
    padding: 0 40px 0 18px;
    border: 1px solid #d9d7d1;
    border-radius: 999px;
    background-color: #ffffff;
    color: #16202a;
    font-size: 16px;
    appearance: none;
    -webkit-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, #16202a 50%),
        linear-gradient(135deg, #16202a 50%, transparent 50%);
    background-position:
        calc(100% - 24px) 21px,
        calc(100% - 19px) 21px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    cursor: pointer;
}

.explore-sheet-select:focus-visible {
    border-color: #4f6a5c;
    box-shadow: 0 0 0 3px rgba(97, 123, 109, 0.22);
}

.explore-sheet-features {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 16px;
}

.explore-feature-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    cursor: pointer;
    font-size: 15px;
    color: #16202a;
}

.explore-feature-checkbox input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.explore-feature-checkbox-box {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: 1.5px solid #8b9490;
    border-radius: 6px;
    background: #ffffff;
    position: relative;
    transition:
        background-color var(--duration-fast) var(--ease-out),
        border-color var(--duration-fast) var(--ease-out);
}

.explore-feature-checkbox-box::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 6px;
    width: 6px;
    height: 11px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: transform var(--duration-fast) var(--ease-out);
}

.explore-feature-checkbox input:checked + .explore-feature-checkbox-box {
    background: #617b6d;
    border-color: #617b6d;
}

.explore-feature-checkbox input:checked + .explore-feature-checkbox-box::after {
    transform: rotate(45deg) scale(1);
}

.explore-feature-checkbox input:focus-visible + .explore-feature-checkbox-box {
    outline: 2px solid #617b6d;
    outline-offset: 2px;
}

.explore-sheet-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 22px;
    border-top: 1px solid #ebe8e2;
    background: #ffffff;
    flex-shrink: 0;
    padding-bottom: max(14px, env(safe-area-inset-bottom));
}

.explore-sheet-footer-count {
    color: #5b646b;
    font-size: 14px;
}

.explore-sheet-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 52px;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    background: var(--action);
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition:
        transform var(--duration-press) var(--ease-out),
        background-color var(--duration-fast) var(--ease-out);
}

.explore-sheet-cta svg {
    width: 16px;
    height: 16px;
}

.explore-sheet-cta:active {
    transform: scale(0.97);
}


/* Small phones: Filters collapses to its icon so the search keeps the
   width; the active count moves to a corner badge. */
@media (max-width: 639px) {

    .explore-filters-toggle {
        padding: 0;
    }

    .explore-filters-toggle > span:not(.explore-filters-count) {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }

    .explore-filters-count {
        position: absolute;
        top: -2px;
        right: -2px;
        box-shadow: 0 0 0 2px #faf9f6;
    }

    /* The chip row scrolls edge to edge: it runs under the page gutter
       so the next chip visibly continues off-screen. */
    .explore-chip-row {
        margin: 0 calc(-1 * var(--page-gutter));
        padding: 2px var(--page-gutter);
        scroll-padding-inline: var(--page-gutter);
    }
}


/* Tablets: the landscape image row starts here rather than stretching
   the phone's portrait image to half the screen. */
@media (min-width: 640px) {

    .explore-row {
        grid-template-columns: 240px minmax(0, 1fr);
        gap: 28px;
        padding: 24px 0;
    }

    .explore-row-media {
        aspect-ratio: 4 / 3;
        border-radius: 14px;
    }

    .explore-row-name {
        font-size: 22px;
    }
}


/* ---------------------------------------------------------
   Explore - tablet and desktop. The same list given room: a wider
   landscape image, larger names, the labelled Search action, and the
   filter sheet as a centred dialog.
   --------------------------------------------------------- */

@media (min-width: 801px) {

    .explore-hero {
        padding: 64px 0 24px;
    }

    .explore-kicker {
        margin-bottom: 14px;
        font-size: 14px;
    }

    .explore-search-band {
        padding: 12px 0;
    }

    .explore-search,
    .explore-filters-toggle {
        height: 64px;
    }

    .explore-search {
        flex: 0 1 760px;
        padding: 6px;
    }

    .explore-search-icon {
        left: 22px;
        width: 20px;
        height: 20px;
    }

    .explore-search input {
        padding-left: 50px;
        font-size: 17px;
    }

    .explore-search-submit {
        height: 50px;
        padding: 0 24px 0 20px;
    }

    .explore-search-submit-label {
        display: inline;
    }

    .explore-refine {
        padding-top: 6px;
    }

    .explore-chip-row {
        flex-wrap: wrap;
        overflow: visible;
    }

    .explore-results {
        padding-top: 40px;
    }

    /* The list keeps a readable measure on the shared frame and left
       edge; it does not stretch into a full-bleed table. */
    .explore-results .container > * {
        max-width: 1040px;
    }

    .explore-row {
        grid-template-columns: 280px minmax(0, 1fr);
        gap: 36px;
        padding: 28px 0;
    }

    .explore-row-media {
        aspect-ratio: 4 / 3;
        border-radius: 14px;
    }

    .explore-row-name {
        margin-bottom: 12px;
        font-size: clamp(24px, 2.3vw, 30px);
        font-weight: 800;
        line-height: 1.1;
        letter-spacing: -0.025em;
    }

    .explore-row-status {
        font-size: 15px;
    }

    .explore-row-meta {
        margin-top: 14px;
        font-size: 15px;
    }

    .explore-row-features {
        font-size: 14px;
    }

    .explore-load-more {
        padding-top: 40px;
    }

    /* The bottom sheet becomes a centred dialog: a bottom sheet is a
       touch idiom, so a pointer + larger viewport gets the same content
       in a layout suited to it. */
    .explore-sheet {
        inset: 0;
        top: 50%;
        left: 50%;
        bottom: auto;
        right: auto;
        transform: translate(-50%, -50%);
        width: min(560px, calc(100% - 48px));
        max-height: 82vh;
        border-radius: 18px;
    }

    .explore-sheet[open] {
        animation: explore-sheet-in-desktop var(--duration-base) var(--ease-out);
    }

    .explore-sheet-handle {
        display: none;
    }

    .explore-sheet-header {
        padding-top: 22px;
    }

    .explore-sheet-footer {
        padding-bottom: 14px;
    }
}

@keyframes explore-sheet-in-desktop {
    from {
        transform: translate(-50%, -50%) scale(0.97);
        opacity: 0;
    }
    to {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}


/* ---------------------------------------------------------
   Responsive
   --------------------------------------------------------- */

@media (max-width: 900px) {

    .header-inner {
        gap: 20px;
    }

    .main-nav {
        gap: 16px;
    }
}


@media (max-width: 800px) {

    /* Compact mobile header: logo + menu button only. The tagline is
       dropped and "For businesses" moves into the mobile menu, so it
       appears exactly once. Height comes from --header-height. */

    .main-nav,
    .logo span,
    .header-inner .business-button {
        display: none;
    }

    .mobile-nav-toggle {
        display: flex;
    }

    .mobile-nav:not([hidden]) {
        display: flex;
    }


    /* Business cards */

    .business-grid {
        grid-template-columns: 1fr;
    }

    .section-heading {
        align-items: start;
        flex-direction: column;
        gap: 12px;
    }


}


/* =========================================================
   Homepage (Phase 1 redesign - see DESIGN.md)

   Navy + photography hero with the search, illustrated category
   navigation, the Ideas rail, the image-led Featured (sponsored)
   block, the compact Open this Sunday collection and the full-bleed
   Sunday Pick band. Each section has its own composition. Authored
   mobile-first; the split hero starts at 1024px. Every selector here
   is homepage-only, so Explore and Business Detail are unaffected.
   ========================================================= */

/* ---------- Hero ----------
   Mobile/tablet: the illustration fills the hero and the copy and
   search sit on a navy fade at its foot. Desktop: a navy surface with
   the copy and search on the left and the illustration filling the
   right of the band, ending with it. */

.home-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: min(74svh, 640px);
    overflow: hidden;
    background: #16202a;
    color: #faf9f6;
}

.home-hero-media {
    position: absolute;
    inset: 0;
}

.home-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 22%;
}

/* Legibility for the copy over the illustration: the image stays clear
   at the top and settles into solid navy behind the search. */
.home-hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(22, 32, 42, 0.05) 0%,
        rgba(22, 32, 42, 0.25) 34%,
        rgba(22, 32, 42, 0.86) 66%,
        #16202a 92%
    );
}

.home-hero-inner {
    position: relative;
    padding: 120px 0 28px;
}

.home-hero-copy > * {
    animation: hero-rise var(--duration-slow) var(--ease-out) both;
}

.home-hero-copy > :nth-child(2) { animation-delay: 40ms; }
.home-hero-copy > :nth-child(3) { animation-delay: 80ms; }
.home-hero-copy > :nth-child(4) { animation-delay: 120ms; }
.home-hero-copy > :nth-child(5) { animation-delay: 160ms; }

@keyframes hero-rise {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.home-hero-kicker {
    margin: 0 0 12px;
    color: #f2c9b9;
    font-size: 14px;
    font-weight: 700;
}

.home-hero h1 {
    margin: 0;
    max-width: 11ch;
    font-size: clamp(44px, 6vw, 76px);
    font-weight: 800;
    line-height: 0.98;
    letter-spacing: -0.035em;
    color: #faf9f6;
}

.home-hero-lede {
    margin: 14px 0 0;
    max-width: 34ch;
    color: #dbe1e4;
    font-size: 17px;
    line-height: 1.5;
}

/* Search - the principal interaction. */

.search-box {
    display: flex;
    align-items: center;
    margin-top: 22px;
    padding: 5px 5px 5px 0;
    background: #ffffff;
    border-radius: 999px;
    box-shadow: 0 16px 40px rgba(8, 14, 20, 0.28);
}

.home-search-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-left: 18px;
    color: #5b646b;
}

.search-box input {
    flex: 1;
    min-width: 0;
    height: 48px;
    border: 0;
    outline: none;
    padding: 0 12px;
    font-size: 16px;
    background: transparent;
    color: #16202a;
}

.search-box input::placeholder {
    color: #6b7378;
}

.search-box:focus-within {
    box-shadow:
        0 0 0 3px rgba(250, 249, 246, 0.9),
        0 16px 40px rgba(8, 14, 20, 0.28);
}

.search-box button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    min-width: 48px;
    height: 48px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: var(--action);
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition:
        transform var(--duration-press) var(--ease-out),
        background-color var(--duration-fast) var(--ease-out);
}

.search-box button svg {
    width: 19px;
    height: 19px;
}

.home-search-label {
    display: none;
}

.search-box button:active {
    transform: scale(0.97);
}


.home-hero-count {
    display: none;
    margin: 22px 0 0;
    font-size: 15px;
}

.home-hero-count a {
    color: #dbe1e4;
    text-decoration: underline;
    text-decoration-color: rgba(219, 225, 228, 0.4);
    text-underline-offset: 4px;
}

.home-hero-count strong {
    color: #faf9f6;
}

@media (hover: hover) and (pointer: fine) {
    .home-hero-count a:hover {
        color: #faf9f6;
        text-decoration-color: currentColor;
    }
}


/* Focus rings on the homepage's navy surfaces use ivory, as the header
   and footer do: the site-wide sage ring is too dim against navy. */
.home-hero a:focus-visible,
.home-hero button:focus-visible,
.featured-panel a:focus-visible,
.sunday-pick a:focus-visible {
    outline-color: #faf9f6;
}

@media (max-width: 1023px) {
    .home-categories a:focus-visible {
        outline-color: #faf9f6;
    }
}


/* ---------- Category navigation ----------
   On mobile/tablet it continues the hero's navy surface as a swipeable
   row; on desktop it sits on ivory under the hero. "Open now" is the
   one terracotta action; the rest use the commissioned category art. */

.home-categories {
    background: #16202a;
    padding: 4px 0 28px;
}

.home-categories-track {
    display: flex;
    gap: 14px;
    margin: 0;
    padding: 0 var(--page-gutter);
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--page-gutter);
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.home-categories-track::-webkit-scrollbar {
    display: none;
}

.home-categories-track li {
    flex-shrink: 0;
    scroll-snap-align: start;
}

.category-tile,
.category-now {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 84px;
    text-decoration: none;
    transition: transform var(--duration-press) var(--ease-out);
}

.category-tile {
    color: #faf9f6;
}

.category-tile-art {
    display: block;
    width: 84px;
    height: 84px;
    overflow: hidden;
    border-radius: 18px;
    background: #2a3743;
    /* The artwork's pale sky would dissolve into ivory; a hairline keeps
       each tile's edge. Outlines paint above the image. */
    outline: 1px solid rgba(22, 32, 42, 0.08);
    outline-offset: -1px;
}

.category-tile-art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 70%;
    transform: scale(1.35);
    transform-origin: 50% 80%;
    transition: transform var(--duration-slow) var(--ease-out);
}

.category-tile-label {
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
}

/* "Open now" is a single terracotta block the height of a tile plus its
   label, so it reads as the primary choice rather than another category. */
.category-now {
    justify-content: center;
    height: 112px;
    border-radius: 18px;
    background: var(--action);
    color: #ffffff;
}

.category-now svg {
    width: 30px;
    height: 30px;
}

.category-now span {
    font-size: 13px;
    font-weight: 700;
}

.category-tile:active,
.category-now:active {
    transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
    .category-tile:hover .category-tile-art img {
        transform: scale(1.42);
    }

    .category-tile:hover .category-tile-label {
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}


/* Category illustration (no business photo): the artwork carries a
   printed category label along its top edge, so frames crop it from
   the bottom. Real photos keep the default centred crop. */
.is-art {
    object-position: 50% 100%;
}


/* ---------- Ideas for this Sunday ----------
   A horizontal collection: large images, the essentials beneath, no
   card chrome. */

.popular-rail {
    padding: 56px 0 0;
}

.section-heading--rail {
    margin-bottom: 22px;
}

.swipe-cue {
    flex-shrink: 0;
    font-size: 14px;
    font-weight: 600;
    color: #4f6a5c;
}

/* "Swipe" only makes sense for touch. On a desktop-width layout with
   a fine pointer the partly visible next card is affordance enough. */
@media (min-width: 801px) and (hover: hover) and (pointer: fine) {

    .swipe-cue {
        display: none;
    }

}

/* The rail is full-bleed so cards can scroll off the right edge, but
   its inset puts the first card exactly on the page edge that the
   section heading (.container) sits on, at every width. 100% here is
   the rail's own full width. scroll-padding must match the inline
   padding: without it, scroll-snap aligns the first card to the
   scrollport edge on load, scrolling it to x=0 instead of under the
   section heading. */
.rail-track {
    --rail-inset: max(var(--page-gutter), calc((100% - var(--page-max)) / 2));
    display: flex;
    gap: 18px;
    padding: 0 var(--rail-inset) 8px;
    scroll-padding-inline: var(--rail-inset);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.rail-track::-webkit-scrollbar {
    display: none;
}

.rail-item {
    flex: 0 0 auto;
    width: 74%;
    max-width: 300px;
    scroll-snap-align: start;
}

.discovery-card {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

.discovery-card-image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 14px;
    background: #eef2eb;
}

.discovery-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .discovery-card:hover .discovery-card-image img {
        transform: scale(1.03);
    }

    .discovery-card:hover .discovery-card-name {
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}

.discovery-card:active .discovery-card-image {
    transform: scale(0.99);
}

.discovery-card-content {
    display: flex;
    flex-direction: column;
    padding-top: 12px;
}

.discovery-card-category {
    margin-bottom: 4px;
    color: #4f6a5c;
    font-size: 13px;
    font-weight: 700;
}

.discovery-card-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
}

.discovery-card-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 14px;
}

.discovery-card-parish {
    color: #666d72;
}

.discovery-card-status {
    color: #4f575d;
    font-weight: 600;
}

.discovery-card-status.open {
    color: #39704f;
}

.discovery-card-status.closed {
    color: #9a4e42;
}


/* ---------- Featured this Sunday (sponsored) ----------
   A large image with a navy panel layered over its edge. The
   "Sponsored" disclosure sits at the top of the panel, always visible. */

.sponsored-section {
    padding: 72px 0 0;
}

.featured-feature {
    position: relative;
}

.featured-media {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 16px;
    background: #eef2eb;
}

.featured-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-out);
}

.featured-panel {
    position: relative;
    margin: -72px 36px 0 0;
    padding: 26px 24px 28px;
    border-radius: 0 14px 14px 14px;
    background: #16202a;
    color: #faf9f6;
}

.featured-panel-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.featured-kicker {
    margin: 0;
    color: #f2c9b9;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0;
}

.sponsored-label {
    flex-shrink: 0;
    padding: 4px 10px;
    border: 1px solid rgba(250, 249, 246, 0.55);
    border-radius: 999px;
    color: #faf9f6;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.featured-name {
    margin: 0 0 10px;
    font-size: clamp(28px, 3.4vw, 44px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.025em;
}

.featured-name a {
    color: inherit;
    text-decoration: none;
}

.featured-description {
    margin: 0 0 14px;
    max-width: 46ch;
    color: #c3ccd1;
    font-size: 16px;
    line-height: 1.55;
}

.featured-meta,
.sunday-pick-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 0 0 16px;
    color: #c3ccd1;
    font-size: 14px;
}

/* Opening status on navy: a light chip, so the status colours keep
   their meaning and their contrast (DESIGN.md, Trust-Status Rule). */
.home-status {
    display: inline-block;
    margin: 0;
    padding: 6px 12px;
    border-radius: 999px;
    background: #faf9f6;
    color: #4f575d;
    font-size: 14px;
    font-weight: 700;
}

.home-status.open {
    color: #39704f;
}

.home-status.closed {
    color: #9a4e42;
}

.featured-cta {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin-top: 22px;
    color: #faf9f6;
    font-weight: 700;
    text-decoration: none;
}

.featured-cta svg {
    width: 18px;
    height: 18px;
    transition: transform var(--duration-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .featured-feature:hover .featured-media img {
        transform: scale(1.03);
    }

    .featured-feature:hover .featured-cta svg {
        transform: translateX(3px);
    }

    .featured-name a:hover {
        text-decoration: underline;
        text-underline-offset: 4px;
    }
}


/* ---------- Open this Sunday ----------
   The trustworthy utility collection: a white band, compact entries,
   the opening status as the strongest line after the name. */

.open-this-sunday {
    margin-top: 72px;
    padding: 56px 0 64px;
    background: #ffffff;
}

.open-this-sunday .section-heading a {
    flex-shrink: 0;
}

@media (max-width: 800px) {

    .business-grid {
        grid-template-columns: 1fr;
    }

    .business-card {
        grid-template-columns: 104px minmax(0, 1fr);
        gap: 16px;
        padding: 14px 0;
    }

    .business-card h3 {
        margin: 6px 0 8px;
        font-size: 17px;
    }

}


/* ---------- Sunday Pick ----------
   Sunday.je's own weekly recommendation: a full-bleed navy band with
   the one editorial serif on the site (DESIGN.md, Editorial-Serif
   Rule), clearly stated as never paid for. */

.sunday-pick {
    padding: 64px 0 72px;
    background: #16202a;
    color: #faf9f6;
}

.sunday-pick-grid {
    display: grid;
    gap: 32px;
}

/* A masthead rather than a menu heading: roman serif set large and tight,
   with only "Pick" in italic (ivory) as the franchise's one flourish. */
.sunday-pick-title {
    margin: 0;
    font-family: var(--font-serif);
    font-size: clamp(46px, 6vw, 80px);
    font-weight: 400;
    line-height: 0.95;
    letter-spacing: -0.025em;
    color: #f2c9b9;
}

.sunday-pick-title em {
    font-style: italic;
    color: #faf9f6;
}

.sunday-pick-note {
    margin: 10px 0 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(250, 249, 246, 0.16);
    color: #c3ccd1;
    font-size: 14px;
}

.sunday-pick-name {
    margin: 0 0 12px;
    font-size: clamp(30px, 3.8vw, 48px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.025em;
}

.sunday-pick-name a {
    color: inherit;
    text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
    .sunday-pick-name a:hover {
        text-decoration: underline;
        text-underline-offset: 5px;
    }

    .sunday-pick-media:hover img {
        transform: scale(1.03);
    }
}

.sunday-pick-description {
    margin: 0 0 16px;
    max-width: 46ch;
    color: #c3ccd1;
    font-size: 17px;
    line-height: 1.55;
}

.sunday-pick-media {
    display: block;
    aspect-ratio: 5 / 4;
    overflow: hidden;
    border-radius: 18px;
    background: #2a3743;
}

.sunday-pick-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-out);
}


/* ---------- Wider screens ---------- */

@media (min-width: 640px) {

    .home-search-label {
        display: inline;
    }

    .search-box button {
        padding: 0 22px 0 18px;
    }

}

@media (min-width: 801px) {

    .home-hero {
        min-height: 560px;
    }

    .home-hero-inner {
        padding-bottom: 44px;
    }

    .home-hero-lede {
        font-size: 19px;
    }

    .search-box {
        max-width: 580px;
        padding: 6px 6px 6px 0;
    }

    .search-box input,
    .search-box button {
        height: 54px;
    }

    .search-box input {
        font-size: 17px;
    }

    .home-categories {
        padding: 8px 0 40px;
    }

    .home-categories-track {
        width: min(var(--page-max), calc(100% - 2 * var(--page-gutter)));
        margin: 0 auto;
        padding: 0;
        gap: 18px;
        flex-wrap: wrap;
        overflow: visible;
    }

    .category-tile,
    .category-now {
        width: 104px;
    }

    .category-tile-art {
        width: 104px;
        height: 104px;
    }

    .category-now {
        height: 134px;
    }

    .popular-rail {
        padding-top: 72px;
    }

    .featured-feature {
        display: grid;
        grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
        align-items: center;
    }

    .featured-media {
        grid-column: 1 / 3;
        grid-row: 1;
        width: 72%;
        aspect-ratio: 16 / 10;
        border-radius: 20px;
    }

    .featured-panel {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
        padding: 40px 40px 36px;
        border-radius: 16px;
    }

    .sponsored-section {
        padding-top: 96px;
    }

    .open-this-sunday {
        margin-top: 96px;
        padding: 72px 0 88px;
    }

    .sunday-pick {
        padding: 88px 0 96px;
    }

    .sunday-pick-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
        gap: 64px;
    }

}

/* Desktop: navy surface with the copy and search on the left; the
   illustration fills the right of the band and ends with the hero -
   nothing hangs into the section below, so the category row never
   collides with it. For depth, the navy carries two faint glows taken
   from the illustration (its sky near the image, a terracotta warmth
   low behind the copy), and the illustration dissolves into the navy
   along its left and lower edges instead of meeting it in a hard line.
   Phones and tablets keep their own composition (above). */
@media (min-width: 1024px) {

    .home-hero {
        display: block;
        min-height: 0;
        background:
            radial-gradient(60% 80% at 62% 18%, rgba(110, 170, 205, 0.16), transparent 70%),
            radial-gradient(50% 70% at 8% 100%, rgba(200, 111, 84, 0.10), transparent 70%),
            #16202a;
    }

    .home-hero-media {
        inset: 0 0 0 auto;
        width: 54%;
        overflow: hidden;
    }

    .home-hero-media img {
        -webkit-mask-image:
            linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.5) 22%, #000 52%),
            linear-gradient(to top, transparent 0%, #000 14%);
        -webkit-mask-composite: source-in;
        mask-image:
            linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.5) 22%, #000 52%),
            linear-gradient(to top, transparent 0%, #000 14%);
        mask-composite: intersect;
    }

    /* The whole castle with a band of sky, down to the harbour front. */
    .home-hero-media img {
        object-position: 50% 44%;
    }

    .home-hero-media::after {
        display: none;
    }

    .home-hero-inner {
        padding: 88px 0 104px;
    }

    .home-hero-copy {
        max-width: 50%;
    }

    .home-hero-count {
        display: block;
    }

    .home-categories {
        background: transparent;
        padding: 56px 0 8px;
    }

    .home-categories-track {
        flex-wrap: nowrap;
    }

    .category-tile {
        color: #16202a;
    }

    .category-tile-art {
        background: #eef2eb;
    }

    .popular-rail {
        padding-top: 80px;
    }

}

@media (min-width: 1280px) {

    .home-hero-media {
        width: 60%;
    }

}

@media (min-width: 1600px) {

    .home-hero-inner {
        padding: 112px 0 128px;
    }

    /* Wider than tall here: lift the crop so the castle keeps its top. */
    .home-hero-media img {
        object-position: 50% 34%;
    }

}


/* ---------------------------------------------------------
   Site footer — appears on every page (part of base.html), kept
   restrained and separate from any page-specific header treatment.
   --------------------------------------------------------- */

.site-footer {
    background: #16202a;
    padding: 48px 0 32px;
    border-top: 1px solid rgba(250, 249, 246, 0.12);
    color: #faf9f6;
}

.footer-inner {
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.footer-top {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.footer-brand {
    display: inline-flex;
    flex-direction: column;
    gap: 8px;
    width: fit-content;
    color: #faf9f6;
    text-decoration: none;
}

.footer-brand span {
    color: #c3ccd1;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
}

.footer-links a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: #dbe1e4;
    font-size: 15px;
    font-weight: 500;
    text-decoration: none;
    transition: color var(--duration-fast) ease;
}

.footer-links a:hover,
.footer-links a:focus-visible {
    color: #faf9f6;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.footer-base {
    margin: 0;
    padding-top: 22px;
    border-top: 1px solid rgba(250, 249, 246, 0.12);
    color: #c3ccd1;
    font-size: 13px;
}

@media (min-width: 801px) {

    .site-footer {
        padding: 64px 0 36px;
    }

    .footer-top {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

}


/* ---------------------------------------------------------
   Static content pages (Contact / Privacy / Terms)
   --------------------------------------------------------- */

.static-page {
    padding: 48px 0 90px;
}

/* .static-page-inner is also a .container, so the page itself sits on
   the same frame and left edge as the header and footer. Only its
   content is held to a readable measure - it is not re-centred as a
   narrow island of its own. */
.static-page-inner > * {
    max-width: var(--read-max);
}

.static-page h1 {
    margin: 0 0 24px;
    font-size: clamp(36px, 4.6vw, 56px);
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: -0.035em;
}

.static-page h2 {
    margin: 40px 0 12px;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

.static-page p {
    margin: 0 0 16px;
    color: #4d585e;
    font-size: 16px;
    line-height: 1.65;
}

.static-page ul {
    margin: 0 0 20px;
    padding-left: 22px;
    color: #4d585e;
    font-size: 16px;
    line-height: 1.65;
}

.static-page li {
    margin-bottom: 6px;
}

/* Text links only - a .detail-button inside a static page keeps its
   own white-on-terracotta button colours. */
.static-page a:not(.detail-button) {
    color: #4f6a5c;
}

@media (max-width: 800px) {

    .static-page {
        padding: 36px 0 64px;
    }

    .static-page h2 {
        font-size: 20px;
    }

}


/* ---------------------------------------------------------
   For Businesses (core/for_businesses.html) - a conversion page in the
   homepage's language: the proposition on a navy brand surface beside
   the state-aware action panel, then "Find your business" on ivory.
   No feature grid, metrics, pricing, testimonials or dashboard mock-ups.
   --------------------------------------------------------- */

.fb-gateway {
    padding: 40px 0 48px;
    background: #16202a;
    color: #faf9f6;
}

.fb-hero {
    display: grid;
    gap: 36px;
}

.fb-kicker {
    margin: 0;
    color: #f2c9b9;
    font-size: 14px;
    font-weight: 700;
}

.fb-title {
    margin: 14px 0 20px;
    color: #faf9f6;
    font-size: clamp(40px, 5.6vw, 72px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.035em;
}

.fb-title span {
    display: block;
}

.fb-lede {
    max-width: 34em;
    margin: 0 0 26px;
    color: #dbe1e4;
    font-size: 17px;
    line-height: 1.6;
}

/* The two ways in, side by side near the top: claim an existing listing
   or request a new one. Plain text links on the dark hero. */
.fb-routes {
    display: grid;
    gap: 4px;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}

.fb-routes li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 8px;
    color: #c3ccd1;
    font-size: 16px;
}

.fb-routes a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: #faf9f6;
    font-weight: 700;
    text-decoration: underline;
    text-decoration-color: rgba(250, 249, 246, 0.45);
    text-underline-offset: 4px;
}

.fb-routes a:focus-visible {
    outline: 2px solid #a9c2b3;
    outline-offset: 2px;
    border-radius: 4px;
}

@media (hover: hover) {
    .fb-routes a:hover {
        text-decoration-color: #faf9f6;
    }
}

.fb-benefits {
    display: grid;
    gap: 12px;
    margin: 0 0 26px;
    padding: 0;
    list-style: none;
}

.fb-benefits li {
    position: relative;
    padding-left: 32px;
    color: #faf9f6;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.45;
}

/* A small drawn tick in a sage disc - one quiet mark, not an icon set. */
.fb-benefits li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(169, 194, 179, 0.2);
}

.fb-benefits li::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 5px;
    width: 5px;
    height: 10px;
    border: solid #a9c2b3;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.fb-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    margin: 0;
    padding-top: 20px;
    border-top: 1px solid rgba(250, 249, 246, 0.14);
    color: #c3ccd1;
    font-size: 14px;
    font-weight: 600;
}

/* Each reassurance stays whole; lines only break between them. */
.fb-trust span {
    white-space: nowrap;
}

/* The action panel: the one light surface on the navy band. Flat - the
   colour change separates it, no shadow needed. */
.fb-card {
    align-self: start;
    padding: 28px 24px;
    background: #ffffff;
    border-radius: 16px;
    color: #16202a;
}

.fb-card-kicker {
    margin: 0 0 10px;
    color: #4f6a5c;
    font-size: 14px;
    font-weight: 700;
}

.fb-card-title {
    margin: 0 0 10px;
    color: #16202a;
    font-size: clamp(24px, 2.4vw, 30px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.fb-card-text {
    margin: 0 0 22px;
    color: #5b646b;
    font-size: 16px;
    line-height: 1.55;
}

.fb-card-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

.fb-card-actions .detail-button {
    margin-top: 0;
    min-height: 52px;
}

.fb-card-secondary,
.fb-card-note a {
    color: #16202a;
    font-size: 15px;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(22, 32, 42, 0.3);
    text-underline-offset: 3px;
    transition: text-decoration-color var(--duration-fast) ease;
}

.fb-card-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    text-align: center;
}

@media (hover: hover) and (pointer: fine) {
    .fb-card-secondary:hover,
    .fb-card-note a:hover {
        text-decoration-color: currentColor;
    }
}

.fb-card-note {
    margin: 18px 0 0;
    padding-top: 16px;
    border-top: 1px solid #ebe8e2;
    color: #5b646b;
    font-size: 14px;
    line-height: 1.5;
}

.fb-card-note a {
    font-size: 14px;
}


/* Find your business - the secondary path, on ivory. Results are a
   hairline-separated list, not a stack of boxes. */

.fb-search {
    padding: 48px 0 80px;
    scroll-margin-top: 16px;
}

.fb-search-inner {
    max-width: 760px;
}

.fb-search-title {
    margin: 0 0 8px;
    color: #16202a;
    font-size: clamp(28px, 3.2vw, 40px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.025em;
}

.fb-search-intro {
    margin: 0 0 20px;
    color: #5b646b;
    font-size: 16px;
    line-height: 1.55;
}

.fb-search-form {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    border: 1px solid #d9d7d1;
    border-radius: 999px;
    background: #ffffff;
    transition:
        border-color var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out);
}

.fb-search-form:focus-within {
    border-color: #4f6a5c;
    box-shadow: 0 0 0 3px rgba(97, 123, 109, 0.22);
}

.fb-search-form input[type="search"] {
    flex: 1;
    min-width: 0;
    height: 48px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #16202a;
    font-size: 16px;
}

.fb-search-form input[type="search"]::placeholder {
    color: #6b7378;
}

.fb-search-form input[type="search"]:focus-visible {
    outline: none;
}

.fb-search-form .detail-button {
    flex-shrink: 0;
    min-height: 48px;
    margin-top: 0;
    padding: 0 24px;
    cursor: pointer;
}

.fb-results-count {
    margin: 26px 0 4px;
    color: #5b646b;
    font-size: 14px;
}

.fb-results {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.fb-result {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px 0;
    border-bottom: 1px solid #ebe8e2;
}

.fb-result-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.fb-result-name {
    color: #16202a;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

.fb-result-parish {
    color: #5b646b;
    font-size: 14px;
}

.fb-result-side {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
}

.fb-result-status {
    color: #5b646b;
    font-size: 14px;
    font-weight: 600;
}

.fb-result-status--yours {
    color: #4f6a5c;
}

.fb-result-action {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid var(--action);
    border-radius: 999px;
    color: var(--action-hover);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition:
        background-color var(--duration-fast) var(--ease-out),
        color var(--duration-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .fb-result-action:hover {
        background: var(--action);
        color: #ffffff;
    }
}

.fb-result-action:active {
    background: var(--action-hover);
    border-color: var(--action-hover);
    color: #ffffff;
}

.fb-result-help,
.fb-search-help a,
.fb-empty a {
    color: #4f6a5c;
    font-weight: 600;
}

.fb-result-help {
    font-size: 15px;
}

.fb-search-help {
    margin: 16px 0 0;
    color: #5b646b;
    font-size: 15px;
    line-height: 1.55;
}

.fb-empty {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid #ebe8e2;
    color: #5b646b;
    font-size: 16px;
    line-height: 1.55;
}

.fb-empty p {
    margin: 0;
}

.fb-empty .fb-empty-title {
    margin-bottom: 6px;
    color: #16202a;
    font-weight: 700;
}

@media (min-width: 600px) {

    .fb-result {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
    }

    .fb-result-side {
        flex-shrink: 0;
        justify-content: flex-end;
    }

}

@media (min-width: 900px) {

    .fb-gateway {
        padding: 80px 0 88px;
    }

    /* Proposition and action panel side by side on the shared frame;
       the panel column keeps a readable width rather than stretching. */
    .fb-hero {
        grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
        column-gap: clamp(48px, 7vw, 120px);
        align-items: center;
    }

    .fb-lede {
        font-size: 18px;
    }

    .fb-card {
        align-self: center;
        padding: 36px 32px;
    }

    .fb-search {
        padding: 72px 0 104px;
    }

}

/* Text on the navy band and in its panel keeps a visible focus ring. */
.fb-gateway .fb-proposition a:focus-visible {
    outline-color: #faf9f6;
}


/* ---------------------------------------------------------
   Sunday Favourite (business detail) - a calm personal mark, not a
   social "like": a quiet outlined pill with a terracotta outline heart
   under the page's actions; once marked it settles into the deep-sage
   state with a filled heart. No counts, no burst animation.
   --------------------------------------------------------- */

.sunday-favourite {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin: 14px 0 0;
    scroll-margin-top: 24px;
}

.sunday-favourite-button {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 0 18px 0 14px;
    border: 1px solid #c9c6bf;
    border-radius: 999px;
    background: transparent;
    color: #16202a;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color var(--duration-fast) var(--ease-out),
        background-color var(--duration-fast) var(--ease-out),
        transform var(--duration-press) var(--ease-out);
}

.sunday-favourite-icon {
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    fill: transparent;
    stroke: var(--action);
    transition: fill var(--duration-fast) var(--ease-out), stroke var(--duration-fast) var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .sunday-favourite-button:hover {
        border-color: #16202a;
    }
}

.sunday-favourite-button:active {
    transform: scale(0.97);
}

.sunday-favourite.is-selected .sunday-favourite-button {
    border-color: #4f6a5c;
    background: #eef2eb;
}

.sunday-favourite.is-selected .sunday-favourite-icon {
    fill: #4f6a5c;
    stroke: #4f6a5c;
}

.sunday-favourite-note {
    margin: 0;
    color: #5b646b;
    font-size: 14px;
    line-height: 1.45;
}

.sunday-favourite.is-selected .sunday-favourite-note {
    color: #4f6a5c;
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .sunday-favourite-button,
    .sunday-favourite-icon {
        transition: none;
    }

    .sunday-favourite-button:active {
        transform: none;
    }
}


/* ---------------------------------------------------------
   Report incorrect information (businesses/report_issue*.html) - a
   small utility page on the public frame, held to the reading width.
   Constructive, not a complaint form: sage selection states, no
   warning/danger colours. Small sage text uses the deeper #4f6a5c
   (5.6:1 on ivory).
   --------------------------------------------------------- */

.report-issue {
    margin: 0;
    padding-top: 20px;
    border-top: 1px solid #ebe8e2;
}

/* Standalone link, so it gets a comfortable (>=24px) tap target. */
.report-issue-link {
    display: inline-block;
    padding: 6px 0;
    color: #5b646b;
    font-size: 14px;
    text-decoration: underline;
    text-decoration-color: rgba(91, 100, 107, 0.4);
    text-underline-offset: 3px;
    transition: color var(--duration-fast) ease, text-decoration-color var(--duration-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
    .report-issue-link:hover {
        color: #16202a;
        text-decoration-color: currentColor;
    }
}

.report-page {
    padding: 40px 0 72px;
}

.report-page-inner > * {
    max-width: 620px;
}

.report-page h1 {
    margin: 10px 0 12px;
    font-size: clamp(32px, 4vw, 44px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: #16202a;
}

.report-lede {
    margin: 0 0 28px;
    color: #4d585e;
    font-size: 17px;
    line-height: 1.55;
}

.report-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.report-fieldset {
    margin: 0;
    padding: 0;
    border: 0;
}

.report-label {
    display: block;
    margin: 0 0 10px;
    padding: 0;
    color: #16202a;
    font-size: 15px;
    font-weight: 600;
}

.report-options {
    display: grid;
    gap: 8px;
}

/* Whole row is the touch target (min 48px tall). */
.report-option {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid #d9d7d1;
    border-radius: 12px;
    color: #16202a;
    font-size: 15px;
    line-height: 1.35;
    cursor: pointer;
    transition:
        border-color var(--duration-fast) var(--ease-out),
        background var(--duration-fast) var(--ease-out);
}

.report-option input {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #4f6a5c;
}

.report-option:has(input:checked) {
    border-color: #4f6a5c;
    background: #eef2eb;
}

.report-option:has(input:focus-visible) {
    outline: 2px solid #617b6d;
    outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .report-option:hover {
        border-color: #9fae9f;
    }
}

.report-field textarea {
    display: block;
    width: 100%;
    min-height: 120px;
    padding: 12px 14px;
    border: 1px solid #d9d7d1;
    border-radius: 12px;
    background: #ffffff;
    color: #16202a;
    font: inherit;
    font-size: 16px;
    line-height: 1.5;
    resize: vertical;
    transition:
        border-color var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out);
}

/* Request a listing: single-line inputs and the parish select share the
   textarea's field style. */
.report-field input,
.report-field select {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid #d9d7d1;
    border-radius: 12px;
    background: #ffffff;
    color: #16202a;
    font: inherit;
    font-size: 16px;
    line-height: 1.5;
    transition:
        border-color var(--duration-fast) var(--ease-out),
        box-shadow var(--duration-fast) var(--ease-out);
}

.report-field input:focus-visible,
.report-field select:focus-visible,
.report-field textarea:focus-visible {
    outline: none;
    border-color: #4f6a5c;
    box-shadow: 0 0 0 3px rgba(97, 123, 109, 0.22);
}

.report-hint {
    margin: 8px 0 0;
    color: #626a70;
    font-size: 13px;
    line-height: 1.5;
}

/* Validation messages stay in the calm palette: ink text with a sage
   rule, not red - nothing here is the visitor's fault. */
.report-error {
    margin: 0 0 10px;
    padding-left: 10px;
    border-left: 3px solid #4f6a5c;
    color: #16202a;
    font-size: 14px;
    font-weight: 600;
}

.report-reassurance {
    margin: 0;
    color: #4f6a5c;
    font-size: 14px;
    line-height: 1.5;
}

.report-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 22px;
}

.report-actions .detail-button {
    margin-top: 0;
    cursor: pointer;
}

.report-back {
    color: #16202a;
    font-size: 15px;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(22, 32, 42, 0.3);
    text-underline-offset: 3px;
}

/* Honeypot: off-screen, out of the tab order (tabindex=-1) and hidden
   from assistive technology (aria-hidden on the wrapper). */
.report-hp {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.report-thanks {
    padding-top: 12px;
}

.report-thanks-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: #eef2eb;
    color: #4f6a5c;
}

.report-thanks-mark svg {
    width: 22px;
    height: 22px;
}

.report-thanks .detail-button {
    margin-top: 0;
}

@media (min-width: 801px) {

    .report-page {
        padding: 64px 0 96px;
    }

}


/* ---------------------------------------------------------
   Error pages (404 / 500)
   --------------------------------------------------------- */

/* On the shared frame and left edge, like the static pages - not a
   centred island. */
.error-page {
    padding: 72px 0 120px;
}

.error-page-inner > * {
    max-width: 560px;
}

.error-page h1 {
    margin: 12px 0 16px;
    font-size: clamp(40px, 5.4vw, 68px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.035em;
}

.error-page p {
    color: #5b646b;
    font-size: 16px;
    line-height: 1.6;
}

.error-page-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px 24px;
    margin-top: 28px;
}

.error-page-actions .detail-button {
    margin-top: 0;
}

.error-page-actions a:not(.detail-button) {
    color: #4f6a5c;
    font-weight: 700;
    text-decoration: none;
}

.error-page-actions a:not(.detail-button):hover {
    text-decoration: underline;
}

@media (max-width: 800px) {

    .error-page {
        padding: 48px 0 80px;
    }

}


/* ---------------------------------------------------------
   Primary action hover/press — every terracotta action surface
   deepens to the same --action-hover rather than per-button shades.
   --------------------------------------------------------- */

@media (hover: hover) and (pointer: fine) {
    .business-button:hover,
    .detail-button:hover,
    .mobile-nav .mobile-nav-business:hover,
    .search-box button:hover,
    .explore-search-submit:hover,
    .business-action--primary:hover,
    .explore-sheet-cta:hover,
    .category-now:hover {
        background: var(--action-hover);
        border-color: var(--action-hover);
    }
}

.business-button:active,
.detail-button:active,
.mobile-nav .mobile-nav-business:active,
.search-box button:active,
.explore-search-submit:active,
.business-action--primary:active,
.explore-sheet-cta:active,
.category-now:active {
    background: var(--action-hover);
    border-color: var(--action-hover);
}


/* ---------------------------------------------------------
   Reduced motion — fewer and gentler, not zero. Every transform-
   based hover/press/entrance treatment added in this pass is
   softened or removed here; colour, opacity and background
   transitions (which aid comprehension without moving anything)
   are left alone.
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    .home-hero-copy > * {
        animation: none;
    }

    .business-card,
    .business-card-image img,
    .discovery-card-image,
    .discovery-card-image img,
    .featured-media img,
    .featured-cta svg,
    .sunday-pick-media img,
    .category-tile,
    .category-now,
    .category-tile-art img,
    .business-button,
    .detail-button,
    .search-box button,
    .mobile-nav-toggle,
    .mobile-nav-toggle-bar,
    .mobile-nav,
    .main-nav a::after,
    .section-heading a::after,
    .back-link,
    .business-action,
    .explore-row,
    .explore-row-media img,
    .explore-search-band,
    .explore-search-submit,
    .explore-filters-toggle,
    .explore-chip,
    .explore-active-filter-chip,
    .explore-load-more-button,
    .explore-sheet-cta,
    .explore-sheet {
        transition-duration: 0ms !important;
        animation-duration: 0ms !important;
    }

    .business-card:hover,
    .business-card:active,
    .discovery-card:active .discovery-card-image,
    .business-button:hover,
    .business-button:active,
    .detail-button:hover,
    .detail-button:active,
    .search-box button:hover,
    .search-box button:active,
    .category-tile:active,
    .category-now:active,
    .explore-chip:active,
    .explore-search-submit:active,
    .explore-filters-toggle:active,
    .business-action:active,
    .sunday-favourite-button:active,
    .explore-active-filter-chip:active,
    .explore-load-more-button:active,
    .explore-sheet-cta:hover,
    .explore-sheet-cta:active,
    .mobile-nav-toggle:active {
        transform: none;
    }

    .mobile-nav {
        transform: none;
    }

    .business-card:hover .business-card-image img,
    .discovery-card:hover .discovery-card-image img,
    .featured-feature:hover .featured-media img,
    .featured-feature:hover .featured-cta svg,
    .sunday-pick-media:hover img,
    .explore-row:hover .explore-row-media img {
        transform: none;
    }

    .explore-row:hover .explore-row-media .explore-fallback {
        transform: scale(1.3);
    }

    /* The category art is permanently scaled up to crop its printed
       label; under reduced motion it just doesn't grow on hover. */
    .category-tile:hover .category-tile-art img {
        transform: scale(1.35);
    }


}
/* ---------------------------------------------------------
   My Sunday Favourites (businesses/sunday_favourites.html) - Explore's
   ivory opening and hairline rows, smaller square images, and a quiet
   outlined Remove pill on each row. Status keeps the status colours.
   --------------------------------------------------------- */

.main-nav-favourites {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.main-nav-favourites-icon {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
}

.main-nav a[aria-current="page"] {
    color: #faf9f6;
}

.main-nav a[aria-current="page"]::after {
    right: 0;
}

.mobile-nav a[aria-current="page"] {
    color: #faf9f6;
    box-shadow: inset 3px 0 0 #c86f54;
}

.favourites-intro {
    max-width: 60ch;
    margin: 14px 0 0;
    color: #5b646b;
    font-size: 16px;
    line-height: 1.55;
}

.favourites-body {
    padding-bottom: 72px;
}

.favourites-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin: 6px 0 22px;
    padding: 12px 16px 12px 18px;
    border-radius: 14px;
    background: #eef2eb;
    color: #16202a;
    font-size: 15px;
    line-height: 1.45;
}

.favourites-status p {
    margin: 0;
}

.favourites-status:focus-visible {
    outline: 2px solid #617b6d;
    outline-offset: 2px;
}

.favourites-summary {
    margin: 4px 0 6px;
    color: #4f6a5c;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.favourites-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.favourite-row {
    display: grid;
    grid-template-columns: 30% minmax(0, 1fr);
    align-items: start;
    gap: 16px;
    padding: 18px 0;
    border-top: 1px solid #ebe8e2;
}

.favourite-row:last-child {
    border-bottom: 1px solid #ebe8e2;
}

.favourite-row-media.explore-row-media {
    display: block;
    aspect-ratio: 1 / 1;
}

.favourite-row-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    min-width: 0;
}

.favourite-row-name {
    margin: 0 0 2px;
    font-size: 19px;
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: -0.015em;
    overflow-wrap: anywhere;
}

.favourite-row-name a {
    color: #16202a;
    text-decoration: none;
}

.favourite-row-name a:hover,
.favourite-row-name a:focus-visible {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
}

.favourite-status {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    color: #16202a;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
}

.favourite-status--open {
    color: #39704f;
}

.favourite-status--closed {
    color: #9a4e42;
}

.favourite-status-note {
    margin: 0;
    color: #5b646b;
    font-size: 13px;
    line-height: 1.4;
}

.favourite-row-content .explore-row-meta {
    margin: 0;
}

.favourite-remove {
    margin: 6px 0 0;
}

.favourite-remove-button,
.favourites-undo {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid #c9c6bf;
    border-radius: 999px;
    background: transparent;
    color: #16202a;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out), transform var(--duration-press) var(--ease-out);
}

.favourites-undo {
    border-color: #4f6a5c;
    background: #ffffff;
}

@media (hover: hover) and (pointer: fine) {
    .favourite-remove-button:hover,
    .favourites-undo:hover {
        border-color: #16202a;
    }
}

.favourite-remove-button:active,
.favourites-undo:active {
    transform: scale(0.97);
}

.favourites-empty {
    max-width: 560px;
    padding: 28px 0 8px;
}

.favourites-empty-title {
    margin: 0 0 10px;
    color: #16202a;
    font-size: clamp(24px, 2.6vw, 30px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.favourites-empty p {
    margin: 0 0 8px;
    color: #5b646b;
    font-size: 16px;
    line-height: 1.55;
}

.favourites-unavailable {
    margin-top: 36px;
}

.favourites-unavailable-title {
    margin: 0 0 6px;
    color: #5b646b;
    font-size: 15px;
    font-weight: 700;
}

.favourites-unavailable-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.favourites-unavailable-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 10px 0;
    border-top: 1px solid #ebe8e2;
    color: #16202a;
    font-size: 16px;
}

.favourites-unavailable-list .favourite-remove {
    margin: 0;
}

.favourites-more {
    margin: 28px 0 0;
    font-size: 15px;
    font-weight: 700;
}

.favourites-more a {
    color: #4f6a5c;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

@media (min-width: 640px) {
    .favourite-row {
        grid-template-columns: 180px minmax(0, 1fr);
        gap: 24px;
    }
}

@media (min-width: 1024px) {
    .favourites-list,
    .favourites-unavailable,
    .favourites-status {
        max-width: 860px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .favourite-remove-button,
    .favourites-undo {
        transition: none;
    }
}


/* ---------------------------------------------------------
   Sunday Planner (in development, staff-only behind
   PLANNER_ENABLED). Navy hero band, image-led stops, the
   site's form controls and pill buttons.
   --------------------------------------------------------- */

.planner-hero {
    padding: 40px 0 36px;
    background: #16202a;
    color: #faf9f6;
}

.planner-kicker {
    margin: 0 0 10px;
    color: #e8a58f;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.planner-title {
    margin: 0;
    font-size: clamp(38px, 5.4vw, 68px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.035em;
}

.planner-lede {
    max-width: 56ch;
    margin: 16px 0 0;
    color: #c3ccd1;
    font-size: 17px;
    line-height: 1.55;
}

.planner-summary {
    margin: 14px 0 0;
    color: #c3ccd1;
    font-size: 16px;
}

.planner-change {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin-top: 6px;
    color: #faf9f6;
    font-size: 15px;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(250, 249, 246, 0.45);
    text-underline-offset: 4px;
}

.planner-sample {
    padding: 12px 0;
    background: #fbefe9;
    border-bottom: 1px solid #f0d8cd;
    color: #16202a;
    font-size: 14px;
    line-height: 1.5;
}

.planner-small {
    margin: 10px 0 0;
    color: #5b646b;
    font-size: 14px;
    line-height: 1.5;
}

/* Setup */

.planner-setup-wrap {
    padding-top: 32px;
    padding-bottom: 72px;
}

.planner-setup {
    display: grid;
    gap: 36px;
    max-width: 880px;
}

.planner-step {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.planner-step-legend {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    padding: 0;
    color: #16202a;
    font-size: clamp(21px, 2.4vw, 26px);
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.2;
}

.planner-step-num {
    display: inline-grid;
    flex-shrink: 0;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: #16202a;
    color: #faf9f6;
    font-size: 15px;
    font-weight: 800;
}

.planner-presets {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.planner-preset {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #ffffff;
    border: 2px solid #ebe8e2;
    border-radius: 16px;
    color: #16202a;
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out);
}

.planner-preset input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.planner-preset-media {
    display: block;
    aspect-ratio: 4 / 3;
    background: #eef2eb;
}

.planner-preset-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.planner-preset-title {
    padding: 12px 14px 0;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.25;
}

.planner-preset-blurb {
    padding: 4px 14px 14px;
    color: #5b646b;
    font-size: 14px;
    line-height: 1.45;
}

.planner-preset:has(input:checked) {
    border-color: #4f6a5c;
    background: #eef2eb;
}

.planner-preset:has(input:checked) .planner-preset-title::after {
    content: " ✓";
    color: #4f6a5c;
}

.planner-preset:has(input:focus-visible) {
    outline: 3px solid #617b6d;
    outline-offset: 2px;
}

.planner-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.planner-row .report-field select,
.planner-setup .report-field select {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid #d9d7d1;
    border-radius: 12px;
    background: #ffffff;
    color: #16202a;
    font: inherit;
    font-size: 16px;
}

.planner-subfield {
    margin: 20px 0 0;
    padding: 0;
    border: 0;
}

.planner-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.planner-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 18px 0 14px;
    background: #ffffff;
    border: 1px solid #d9d7d1;
    border-radius: 999px;
    color: #16202a;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.planner-pill input,
.planner-check input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: #4f6a5c;
}

.planner-pill:has(input:checked) {
    border-color: #4f6a5c;
    background: #eef2eb;
}

.planner-pill:has(input:focus-visible),
.planner-check:has(input:focus-visible) {
    outline: 3px solid #617b6d;
    outline-offset: 2px;
}

.planner-check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    margin-top: 12px;
    color: #16202a;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.planner-setup-actions {
    padding-top: 8px;
    border-top: 1px solid #ebe8e2;
}

.planner-build {
    min-width: 220px;
}

/* Editor */

.planner-layout {
    display: grid;
    gap: 28px;
    padding-top: 24px;
    padding-bottom: 72px;
}

.planner-main {
    min-width: 0;
}

.planner-main.is-updating {
    opacity: 0.6;
    transition: opacity var(--duration-fast) var(--ease-out);
}

.planner-main.is-updated .planner-stops {
    animation: planner-settle var(--duration-base) var(--ease-out);
}

@keyframes planner-settle {
    from { opacity: 0.6; }
    to { opacity: 1; }
}

.planner-notice {
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #eef2eb;
    color: #16202a;
    font-size: 15px;
    font-weight: 600;
}

.planner-past {
    margin: 0 0 18px;
    padding: 16px 18px;
    border-left: 4px solid #b85538;
    border-radius: 0 12px 12px 0;
    background: #fbefe9;
    color: #16202a;
    font-size: 15px;
    line-height: 1.5;
}

.planner-past p {
    margin: 0 0 6px;
}

/* Day at a glance */

.planner-glance {
    margin: 0 0 28px;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #ebe8e2;
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
}

.planner-glance-title {
    margin: 0 0 14px;
    color: #16202a;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.planner-timeline {
    position: relative;
    height: 34px;
    overflow: hidden;
    border-radius: 999px;
    background: #f1efe9;
}

.planner-timeline span {
    position: absolute;
    top: 0;
    bottom: 0;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 800;
}

.planner-timeline-stop {
    border-radius: 999px;
    background: #16202a;
    color: #faf9f6;
}

.planner-timeline-stop.is-warning {
    background: #8a4a1f;
}

.planner-timeline-stop.is-problem {
    background: #9a4e42;
}

.planner-timeline-travel {
    background: repeating-linear-gradient(90deg, #c9cfc7 0 4px, transparent 4px 8px);
    background-clip: content-box;
    padding: 15px 0;
}

.planner-timeline-scale {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    color: #5b646b;
    font-size: 12px;
    font-weight: 700;
}

.planner-glance-list {
    display: grid;
    gap: 6px;
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
}

.planner-glance-list li {
    display: grid;
    grid-template-columns: 9.4em minmax(0, 1fr);
    gap: 10px;
    font-size: 15px;
    line-height: 1.4;
}

.planner-glance-list.is-untimed li {
    grid-template-columns: 4.5em minmax(0, 1fr);
}

.planner-glance-when {
    color: #4f6a5c;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.planner-glance-name {
    color: #16202a;
    font-weight: 700;
}

.planner-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid #ebe8e2;
}

.planner-stats dt {
    color: #5b646b;
    font-size: 12px;
    font-weight: 700;
}

.planner-stats dd {
    margin: 2px 0 0;
    color: #16202a;
    font-size: 17px;
    font-weight: 800;
}

.planner-untimed,
.planner-issues {
    margin: 14px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.5;
}

.planner-untimed {
    background: #f5f6f2;
    color: #16202a;
}

.planner-issues {
    border-left: 4px solid #b85538;
    border-radius: 0 10px 10px 0;
    background: #fbefe9;
    color: #16202a;
    font-weight: 600;
}

/* Stops */

.planner-stops-title {
    margin: 0 0 10px;
    color: #16202a;
    font-size: 20px;
    font-weight: 800;
}

.planner-empty {
    padding: 20px;
    background: #ffffff;
    border: 1px solid #ebe8e2;
    border-radius: 16px;
}

.planner-empty p {
    margin: 0 0 12px;
}

.planner-stops {
    margin: 0;
    padding: 0;
    list-style: none;
}

.planner-leg {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 10px;
    margin: 0 0 0 31px;
    padding: 10px 0 10px 20px;
    border-left: 2px dashed #c9cfc7;
}

.planner-leg-time {
    color: #16202a;
    font-size: 14px;
    font-weight: 700;
}

.planner-leg-note {
    color: #5b646b;
    font-size: 13px;
}

.planner-stop {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 4px 14px;
    padding: 14px;
    background: #ffffff;
    border: 1px solid #ebe8e2;
    border-radius: 18px;
    scroll-margin-top: 16px;
}

.planner-stop--problem {
    border-color: #d9a493;
}

.planner-stop-thumb {
    position: relative;
    width: 64px;
    height: 64px;
    overflow: hidden;
    border-radius: 14px;
    background: #eef2eb;
}

.planner-stop-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.planner-stop-num {
    position: absolute;
    bottom: 4px;
    left: 4px;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #16202a;
    color: #faf9f6;
    font-size: 13px;
    font-weight: 800;
}

.planner-stop-main {
    min-width: 0;
}

.planner-stop-time {
    margin: 0;
    color: #4f6a5c;
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.planner-stop-name {
    margin: 2px 0 0;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.planner-stop-name:focus {
    outline: none;
}

.planner-stop-name:focus-visible {
    outline: 3px solid #617b6d;
    outline-offset: 3px;
    border-radius: 4px;
}

.planner-stop-name a {
    color: #16202a;
    text-decoration: none;
}

.planner-stop-name a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.planner-stop-meta {
    margin: 2px 0 0;
    color: #5b646b;
    font-size: 14px;
}

.planner-pin {
    color: #b85538;
    font-weight: 700;
}

.planner-reason {
    margin: 6px 0 0;
    color: #16202a;
    font-size: 15px;
    line-height: 1.45;
}

.planner-checks {
    display: grid;
    gap: 2px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    line-height: 1.45;
}

.planner-checks li {
    position: relative;
    padding-left: 16px;
}

.planner-checks li::before {
    content: "";
    position: absolute;
    top: 0.5em;
    left: 1px;
    width: 8px;
    height: 8px;
    border-radius: 999px;
}

.planner-check-ok { color: #39704f; }
.planner-check-ok::before { background: #39704f; }
.planner-check-info { color: #5b646b; }
.planner-check-info::before { background: #8a949a; }
.planner-check-warning { color: #8a4a1f; font-weight: 600; }
.planner-check-warning::before { background: #c8873a; }
.planner-check-problem { color: #9a4e42; font-weight: 700; }
.planner-check-problem::before { background: #9a4e42; }

.planner-controls {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid #ebe8e2;
}

.planner-visit {
    display: inline-flex;
    align-items: center;
    border: 1px solid #d9d7d1;
    border-radius: 999px;
}

.planner-visit form {
    display: contents;
}

.planner-step-btn {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #16202a;
    font: inherit;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
}

.planner-step-btn:disabled {
    color: #b9bdbf;
    cursor: not-allowed;
}

.planner-visit-value {
    min-width: 74px;
    color: #16202a;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
}

.planner-action {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid #d9d7d1;
    border-radius: 999px;
    background: #ffffff;
    color: #16202a;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.planner-action[aria-current="true"] {
    border-color: #4f6a5c;
    background: #eef2eb;
}

.planner-action--quiet {
    border-color: transparent;
    color: #5b646b;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.planner-edit {
    position: relative;
}

.planner-edit summary {
    list-style: none;
}

.planner-edit summary::-webkit-details-marker {
    display: none;
}

.planner-edit summary::after {
    content: "";
    width: 7px;
    height: 7px;
    margin: -3px 0 0 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

.planner-edit[open] summary {
    border-color: #4f6a5c;
    background: #eef2eb;
}

.planner-edit-menu {
    position: absolute;
    z-index: 5;
    top: calc(100% + 6px);
    right: 0;
    display: grid;
    min-width: 200px;
    padding: 6px;
    background: #ffffff;
    border: 1px solid #d9d7d1;
    border-radius: 14px;
    box-shadow: var(--shadow-md);
}

.planner-menu-item {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: #16202a;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.planner-menu-item:disabled {
    color: #9aa0a4;
    cursor: not-allowed;
}

@media (hover: hover) and (pointer: fine) {
    .planner-menu-item:not(:disabled):hover {
        background: #f5f6f2;
    }
}

.planner-step-btn:focus-visible,
.planner-action:focus-visible,
.planner-menu-item:focus-visible,
.planner-choose:focus-visible {
    outline: 3px solid #617b6d;
    outline-offset: 2px;
}

.planner-panel {
    grid-column: 1 / -1;
    margin-top: 10px;
    padding: 14px;
    background: #f5f6f2;
    border-radius: 14px;
}

.planner-panel p {
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 1.5;
}

.planner-panel-title {
    margin: 0 0 10px;
    color: #16202a;
    font-size: 17px;
    font-weight: 800;
}

.planner-panel-title:focus {
    outline: none;
}

.planner-panel-title:focus-visible {
    outline: 3px solid #617b6d;
    outline-offset: 3px;
}

.planner-panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.planner-swap-list {
    display: grid;
    gap: 8px;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
}

.planner-swap-option {
    display: grid;
    gap: 8px;
    padding: 12px;
    background: #ffffff;
    border: 1px solid #ebe8e2;
    border-radius: 12px;
}

.planner-swap-name {
    margin: 0;
    color: #16202a;
    font-size: 16px;
    font-weight: 700;
}

.planner-swap-option .planner-swap-reasons {
    margin: 2px 0 0;
    color: #5b646b;
    font-size: 14px;
    line-height: 1.4;
}

.planner-choose {
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: var(--action);
    color: #ffffff;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

.planner-add {
    margin-top: 16px;
}

.planner-save {
    padding: 22px;
    background: #16202a;
    border-radius: 20px;
    color: #c3ccd1;
}

.planner-save-title {
    margin: 0 0 8px;
    color: #faf9f6;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.015em;
}

.planner-save p {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
}

.planner-save .planner-small {
    margin-top: 14px;
    color: #c3ccd1;
    font-size: 13px;
}

.planner-save-steps {
    margin: 16px 0;
    padding-left: 20px;
    color: #16202a;
    font-size: 16px;
    line-height: 1.6;
}

.planner-subfield--first {
    margin: 0 0 16px;
}

@media (min-width: 640px) {
    .planner-presets {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .planner-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .planner-stop {
        grid-template-columns: 96px minmax(0, 1fr);
        padding: 16px;
    }

    .planner-stop-thumb {
        width: 96px;
        height: 96px;
    }

    .planner-leg {
        margin-left: 47px;
    }

    .planner-controls {
        grid-column: 2;
    }

    .planner-panel {
        grid-column: 2;
    }

    .planner-swap-option {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }
}

@media (min-width: 1024px) {
    .planner-hero {
        padding: 56px 0 48px;
    }

    .planner-layout {
        grid-template-columns: minmax(0, 1fr) 320px;
        align-items: start;
        gap: 40px;
    }

    .planner-side {
        position: sticky;
        top: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .planner-main.is-updating,
    .planner-main.is-updated .planner-stops {
        transition: none;
        animation: none;
    }
}

/* Planner: saved plans, accounts, offers */

.planner-offer {
    margin-top: 16px;
    padding: 16px;
    background: #ffffff;
    border: 1px dashed #c9cfc7;
    border-radius: 16px;
}

.planner-offer form {
    margin-top: 10px;
}

.planner-card {
    padding: 20px;
    background: #ffffff;
    border: 1px solid #ebe8e2;
    border-radius: 20px;
}

.planner-card-section {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid #ebe8e2;
}

.planner-card .planner-small {
    margin: 8px 0;
}

.planner-wide {
    width: 100%;
    margin-top: 0;
}

.planner-share-link {
    display: block;
    width: 100%;
    min-height: 44px;
    margin: 6px 0 10px;
    padding: 8px 12px;
    border: 1px solid #d9d7d1;
    border-radius: 10px;
    background: #f5f6f2;
    color: #16202a;
    font: inherit;
    font-size: 14px;
}

.planner-check--top {
    align-items: flex-start;
    line-height: 1.45;
}

.planner-check--top input {
    margin-top: 3px;
}

.planner-hours-note {
    margin: 0 0 14px;
}

.planner-plan-list {
    display: grid;
    gap: 10px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.planner-plan-card {
    display: grid;
    gap: 4px;
    padding: 16px 18px;
    background: #ffffff;
    border: 1px solid #ebe8e2;
    border-radius: 16px;
    color: #16202a;
    text-decoration: none;
}

.planner-plan-card:focus-visible {
    outline: 3px solid #617b6d;
    outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .planner-plan-card:hover {
        border-color: #9fae9f;
    }
}

.planner-plan-title {
    font-size: 19px;
    font-weight: 800;
}


/* Sunday Planner: map overview (planner/mapview.py). No tiles or routes:
   a sourced coastline and numbered pins from reviewed locations only. */
.planner-map {
    margin: 0 0 28px;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #ebe8e2;
    border-radius: 20px;
    box-shadow: var(--shadow-sm);
}

.planner-map-frame {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #e7eeec;
    border-radius: 14px;
}

.planner-map-svg {
    display: block;
    width: 100%;
    height: 100%;
}

.planner-map-land {
    fill: #fbf8f2;
    stroke: #617b6d;
    stroke-width: 1.2;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.planner-map-markers {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A marker is a zero-size box at the true point; everything inside is
   positioned from it in pixels (mapview.FRAME_MIN_PX layout). */
.planner-map-marker {
    position: absolute;
    width: 0;
    height: 0;
}

.planner-map-label {
    position: absolute;
    left: var(--dx, 0px);
    top: var(--dy, 0px);
    display: flex;
    transform: translate(-50%, -50%);
    background: #16202a;
    border: 2.5px solid #ffffff;
    border-radius: 999px;
    box-shadow: var(--shadow-sm);
    z-index: 2;
}

.planner-map-label a {
    display: grid;
    place-items: center;
    min-width: 25px;
    height: 25px;
    padding: 0 2px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    border-radius: 999px;
    transition: background-color var(--duration-fast) var(--ease-out);
}

.planner-map-label a + a {
    margin-left: -5px;
    box-shadow: inset 1.5px 0 0 rgba(255, 255, 255, 0.55);
    border-radius: 0 999px 999px 0;
}

.planner-map-label a:hover,
.planner-map-label a:focus-visible {
    background: var(--action);
}

.planner-map-label a:focus-visible {
    outline: 3px solid #16202a;
    outline-offset: 2px;
}

.planner-map-anchor {
    position: absolute;
    left: -5px;
    top: -5px;
    width: 10px;
    height: 10px;
    background: #16202a;
    border: 2px solid #ffffff;
    border-radius: 50%;
    z-index: 1;
}

.planner-map-leader {
    position: absolute;
    left: 0;
    top: -0.75px;
    width: var(--leader, 0px);
    height: 1.5px;
    background: #16202a;
    transform: rotate(var(--angle, 0deg));
    transform-origin: 0 50%;
}

.planner-map-marker.is-site-centre::before {
    content: "";
    position: absolute;
    left: -27px;
    top: -27px;
    width: 54px;
    height: 54px;
    border: 1.5px dashed #16202a;
    border-radius: 50%;
    background: rgba(22, 32, 42, 0.08);
    pointer-events: none;
}

.planner-map-key.is-shared {
    display: inline-block;
    padding: 1px 6px;
    margin-right: 4px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    background: #16202a;
    border-radius: 999px;
}

.planner-map-key.is-leader {
    display: inline-block;
    position: relative;
    width: 22px;
    height: 0;
    margin-right: 6px;
    vertical-align: 4px;
    border-top: 1.5px solid #16202a;
}

.planner-map-key.is-leader::before {
    content: "";
    position: absolute;
    left: -4px;
    top: -5px;
    width: 8px;
    height: 8px;
    background: #16202a;
    border-radius: 50%;
}

.planner-map-legend {
    display: grid;
    gap: 6px;
    margin: 14px 0 0;
    padding: 0;
    list-style: none;
    color: #4a5359;
    font-size: 14px;
    line-height: 1.45;
}

.planner-map-key.is-site-centre {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 4px;
    vertical-align: -2px;
    border: 1.5px dashed #16202a;
    border-radius: 50%;
    background: rgba(22, 32, 42, 0.08);
}

.planner-map-credit {
    margin: 10px 0 0;
    color: #666d72;
    font-size: 12px;
}

.planner-map-credit a {
    color: inherit;
}

/* Sunday Planner: must-do search (planner/static/planner/search.js). */
.planner-search {
    position: relative;
}

.planner-search-list {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    max-height: 288px;
    margin: 4px 0 0;
    padding: 6px;
    overflow-y: auto;
    list-style: none;
    background: #ffffff;
    border: 1px solid #d9d5cc;
    border-radius: 14px;
    box-shadow: var(--shadow-md);
}

.planner-search-option {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    cursor: pointer;
}

.planner-search-option[aria-selected="true"],
.planner-search-option:hover {
    background: #f1f4f2;
}

.planner-search-name {
    color: #16202a;
    font-weight: 700;
}

.planner-search-parish {
    color: #666d72;
    font-size: 14px;
    white-space: nowrap;
}

.planner-search-choices {
    margin-top: 12px;
}

/* Sunday Planner editor board (planner/_plan_body.html): summary, side
   panel (Save + compact map), stops. Reading order is the same at every
   width; on wide screens the side panel moves beside the itinerary and
   stays in view. */
.planner-layout--editor {
    display: block;
}

.planner-board {
    display: grid;
    gap: 0;
}

.planner-board-side {
    display: grid;
    gap: 16px;
    margin: 0 0 28px;
}

.planner-board-side .planner-map {
    margin: 0;
}

.planner-map-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 12px;
}

.planner-map-title {
    margin: 0;
    color: #16202a;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.01em;
}

.planner-map-enlarge {
    min-height: 36px;
    padding: 6px 14px;
    color: #16202a;
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    background: #ffffff;
    border: 1px solid #d9d5cc;
    border-radius: 999px;
    cursor: pointer;
}

.planner-map-enlarge:hover {
    border-color: #16202a;
}

.planner-map-enlarge:focus-visible {
    outline: 3px solid #16202a;
    outline-offset: 2px;
}

.planner-map-scroll {
    border-radius: 14px;
    overflow: hidden;
}

/* Enlarged: the same map at twice the width, panned by scrolling. */
.planner-map.is-enlarged .planner-map-scroll {
    overflow: auto;
    overscroll-behavior: contain;
    max-height: 70vh;
}

.planner-map.is-enlarged .planner-map-frame {
    width: 220%;
    border-radius: 0;
}

.planner-map-scroll:focus-visible {
    outline: 3px solid #16202a;
    outline-offset: 2px;
}

.planner-map-place {
    fill: #4f6a5c;
    font-size: 30px;
    font-style: italic;
    font-weight: 600;
    paint-order: stroke;
    stroke: #fbf8f2;
    stroke-width: 6px;
    stroke-linejoin: round;
}

.planner-map.is-enlarged .planner-map-place {
    font-size: 15px;
    stroke-width: 4px;
}

.planner-map-place-dot {
    fill: #617b6d;
}

.planner-map-note {
    margin: 10px 0 0;
    color: #4a5359;
    font-size: 14px;
    line-height: 1.45;
}

.planner-map-about {
    margin: 10px 0 0;
    font-size: 14px;
}

.planner-map-about summary {
    color: #16202a;
    font-weight: 700;
    cursor: pointer;
}

.planner-map-about summary:focus-visible {
    outline: 3px solid #16202a;
    outline-offset: 2px;
}

.planner-map-about .planner-map-legend {
    margin-top: 8px;
}

/* Phone save bar: Save stays one tap away while scrolling and editing. */
.planner-savebar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 0 calc(-1 * var(--page-gutter));
    padding: 10px var(--page-gutter) calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(250, 249, 246, 0.96);
    border-top: 1px solid #ebe8e2;
}

.planner-savebar.is-hidden {
    visibility: hidden;
}

/* Below the wide layout the save bar sticks to the bottom of the screen:
   keep anything scrolled to (a focused control, an #anchor such as
   #add-stop or #planner-add-result) clear of it. */
@media (max-width: 1023px) {
    html:has(.planner-savebar) {
        scroll-padding-bottom: 88px;
    }
}

.planner-savebar .detail-button {
    display: flex;
    justify-content: center;
    width: 100%;
}

.planner-detail-map {
    max-width: 640px;
}

@media (min-width: 1024px) {
    .planner-board {
        grid-template-columns: minmax(0, 1fr) 340px;
        grid-template-areas:
            "summary side"
            "stops side";
        align-items: start;
        column-gap: 40px;
    }

    .planner-board-summary {
        grid-area: summary;
    }

    .planner-board-stops {
        grid-area: stops;
    }

    .planner-board-side {
        grid-area: side;
        position: sticky;
        top: 24px;
        margin: 0;
    }

    .planner-savebar {
        display: none;
    }
}

/* Homepage entry point for the Sunday Planner (planner/_home_entry.html).
   Only rendered when the planner is available to the viewer. */
.planner-entry {
    padding: 48px 0 0;
}

.planner-entry-inner {
    display: grid;
    gap: 24px;
    align-items: center;
}

.planner-entry-copy {
    padding: 28px 24px;
    background: #16202a;
    border-radius: 24px;
    color: #c3ccd1;
}

.planner-entry-kicker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    color: #e0a48f;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.planner-entry-badge {
    padding: 2px 8px;
    color: #16202a;
    font-size: 12px;
    font-weight: 800;
    background: #faf9f6;
    border-radius: 999px;
}

.planner-entry-title {
    margin: 0 0 10px;
    color: #faf9f6;
    font-size: clamp(28px, 6vw, 40px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.025em;
}

.planner-entry-text {
    max-width: 52ch;
    margin: 0 0 20px;
    font-size: 16px;
    line-height: 1.55;
}

.planner-entry-small {
    margin: 12px 0 0;
    color: #c3ccd1;
    font-size: 14px;
}

.planner-entry-art {
    display: none;
    margin: 0;
    padding: 0;
    list-style: none;
}

.planner-entry-art img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: var(--shadow-md);
}

@media (min-width: 768px) {
    .planner-entry-copy {
        padding: 40px;
    }

    .planner-entry-art {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    .planner-entry-art li:nth-child(2) {
        transform: translateY(18px);
    }
}

@media (min-width: 1024px) {
    .planner-entry-inner {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        gap: 40px;
    }
}

/* Planner: add a stop (suggest or search), late first opening, sharing */

.planner-add {
    display: grid;
    gap: 12px;
    padding: 18px;
    background: #ffffff;
    border: 1px solid #ebe8e2;
    border-radius: 16px;
}

.planner-add .planner-panel-title {
    margin: 0;
}

.planner-add-result {
    margin: 0;
    padding: 10px 12px;
    border-left: 4px solid #b85538;
    border-radius: 0 10px 10px 0;
    background: #fbefe9;
    color: #16202a;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.45;
}

.planner-add-result.is-empty {
    display: none;
}

.planner-add-label,
.planner-share-label {
    display: block;
    margin-bottom: 6px;
    color: #16202a;
    font-size: 15px;
    font-weight: 700;
}

.planner-add-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.planner-add-row input {
    flex: 1 1 200px;
    min-width: 0;
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid #c9cfc7;
    border-radius: 10px;
    background: #ffffff;
    color: #16202a;
    font: inherit;
    font-size: 16px; /* 16px keeps iOS from zooming the page on focus */
}

.planner-add-results:focus,
.planner-add-result:focus,
.planner-glance-title:focus {
    outline: 2px solid #4f6a5c;
    outline-offset: 3px;
}

.planner-add-options {
    display: grid;
    gap: 8px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.planner-add-option {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    padding: 10px 12px;
    border: 1px solid #ebe8e2;
    border-radius: 12px;
}

.planner-add-option-text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.planner-add-option-name {
    color: #16202a;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.planner-add-option-state {
    color: #5b646b;
    font-weight: 600;
}

.planner-late {
    display: grid;
    gap: 8px;
    margin: 12px 0 0;
    padding: 12px 14px;
    border-left: 4px solid #b85538;
    border-radius: 0 10px 10px 0;
    background: #fbefe9;
    color: #16202a;
    font-size: 15px;
    line-height: 1.45;
}

.planner-late p {
    margin: 0;
}

.planner-late form {
    margin: 2px 0 0;
}

.planner-share {
    display: grid;
    gap: 10px;
    margin: 0 0 18px;
    padding: 18px;
    background: #ffffff;
    border: 1px solid #ebe8e2;
    border-radius: 16px;
}

.planner-share-title {
    margin: 0;
    color: #16202a;
    font-size: 17px;
    font-weight: 700;
}

.planner-share .planner-small,
.planner-share .planner-share-link {
    margin: 0;
}

.planner-share-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.planner-share-actions [hidden] {
    display: none;
}

.planner-share-status {
    margin: 0;
    color: #2f5a44;
    font-size: 15px;
    font-weight: 700;
}

.planner-share-status:empty {
    display: none;
}

.planner-share-stop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 10px;
    padding-top: 10px;
    border-top: 1px solid #ebe8e2;
}