/* ===========================================================================
   River and Rail Oruawharo
   ===========================================================================

   The brief: warm, welcomed, safe, curious. The visitor is usually tired, often
   driving at dusk, and deciding in about twenty seconds whether this place is
   somewhere they want to pull off a state highway into.

   So the design does three things:

     - PHOTOGRAPHS CARRY IT. Every image is a real photograph taken on the site,
       at golden hour, and they are given room. No illustration, no icon set, no
       stock. The place is the argument.

     - THE PRICE AND THE METHOD ARE NEVER MORE THAN A SCREEN AWAY. $10, drive
       in, pay, park. A visitor who has to hunt for either has already left.

     - IT STAYS CALM. One accent, wide margins, long line-heights, nothing that
       moves on its own. Calm is what "safe" looks like in a layout.

   Palette is drawn from the supplied material rather than invented: the navy is
   the wave in the logo, the creams and golds are the winter light in the site
   photographs, and the ember is the fire brazier.

   MOBILE-FIRST. Base styles are the narrow viewport; every query below widens
   with min-width. There is no max-width query in this file and there should
   never be one — see the note in the platform CLAUDE.md.

   Bump ASSET_VERSION in includes/site.php after editing this file. Assets are
   cached for a year and you will otherwise be looking at the old one.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Tokens
   --------------------------------------------------------------------------- */

:root {
    /* Ink */
    --ink:          #1e242b;   /* body text — warm near-black, not pure black */
    --ink-soft:     #5c6672;   /* secondary text, captions.  5.6:1 on paper */
    --ink-faint:    #8b8578;   /* hairline labels only, never body copy */

    /* Ground */
    --paper:        #fcfaf6;   /* warm white, the page */
    --paper-alt:    #f4efe5;   /* cream, banded sections */
    --paper-warm:   #ece3d4;   /* deeper cream, the payment panel */
    --rule:         #e4ddd0;

    /* Accent — the navy of the wave in the logo, and its darker ground. */
    --river:        #2f4e6e;   /* links, buttons.  8.4:1 on paper */
    --river-lift:   #3e5e85;   /* hover, and the logo's own stroke colour */
    --river-deep:   #16293b;   /* footer and dark bands */

    /* The fire brazier. Used sparingly and never for a large area. */
    --ember:        #9c4f1c;   /* 5.7:1 on paper — safe for text */
    --ember-lift:   #c8752f;   /* on dark grounds only */

    --ok:           #1e5b34;
    --ok-bg:        #e7f2ea;
    --error:        #8a1f1f;
    --error-bg:     #fbeceb;

    /* Type. Both system stacks — the CSP forbids external origins, so there are
       no webfont links and nothing to self-host.

       The display face is a humanist old-style serif: Iowan on Apple, Palatino
       on Windows, Noto Serif on Android. It is doing the warmth. The logo's own
       geometric caps are echoed instead by .eyebrow, which is the sans tracked
       out wide — pairing the serif against that reads as editorial rather than
       as a clash. */
    --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
    --font-body:    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Spacing — 4px based. */
    --s1: 0.25rem;
    --s2: 0.5rem;
    --s3: 1rem;
    --s4: 1.5rem;
    --s5: 2rem;
    --s6: 3rem;
    --s7: 4.5rem;
    --s8: 6rem;

    --measure: 36rem;
    --gutter:  1.25rem;
    --max:     70rem;
    --max-wide: 80rem;

    --radius:    3px;
    --radius-lg: 6px;

    /* The sticky header's height, so in-page anchors can clear it. Must track
       the real header: it is the logo's height plus its padding, and the pair
       is restated at each of the two header breakpoints. Change one, change the
       other, or anchored headings land underneath the bar. */
    --header-h: 4.25rem;
}

/* ---------------------------------------------------------------------------
   Reset and base
   --------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
    font-family: var(--font-display);
    line-height: 1.15;
    margin: 0 0 var(--s3);
    font-weight: 600;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 1.25rem + 1.7vw, 2.375rem); }
h3 { font-size: clamp(1.15rem, 1.05rem + 0.5vw, 1.375rem); }
h4 { font-size: 1.0625rem; }

p, ul, ol, dl { margin: 0 0 var(--s3); }

/* <address> is italic by default in every browser, which reads as emphasis on
   a postal address rather than as an address. Reset it everywhere, not just in
   the footer — it appears in the Find us panel too. */
address { font-style: normal; }

a { color: var(--river); text-underline-offset: 0.15em; }
a:hover { color: var(--river-lift); }

strong { font-weight: 650; }

/* Visible focus, always. Never remove this without replacing it. */
:focus-visible {
    outline: 2px solid var(--river);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Respect a reduced-motion preference across the whole site — including the
   smooth scrolling the in-page nav relies on. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------------
   Layout helpers
   --------------------------------------------------------------------------- */

.measure { max-width: var(--measure); }

.band { padding-block: var(--s7); }
.band--lift  { background: var(--paper-alt); }
.band--tight { padding-block: var(--s6); }

.band__inner,
.site-header__inner,
.site-footer__inner,
.page-head__inner,
.prose {
    max-width: var(--max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.prose {
    max-width: calc(var(--measure) + var(--gutter) * 2);
    padding-block: var(--s6);
}
.prose h2 { margin-top: var(--s6); }
.prose h2:first-of-type { margin-top: 0; }
.prose code {
    font-size: 0.9em;
    background: var(--paper-alt);
    padding: 0.1em 0.35em;
    border-radius: var(--radius);
}

/* The tracked-out sans that answers the logo's geometric caps. */
.eyebrow {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ember);
    margin: 0 0 var(--s3);
}

/* An in-page section. scroll-margin keeps a heading clear of the sticky header
   when the nav jumps to it — without this the title lands underneath the bar. */
.section { scroll-margin-top: calc(var(--header-h) + var(--s3)); }

/* A short rule used to close a section's introduction. */
.flourish {
    width: 3.5rem;
    height: 2px;
    background: var(--ember);
    border: 0;
    margin: 0 0 var(--s4);
}

/* ---------------------------------------------------------------------------
   Skip link
   --------------------------------------------------------------------------- */

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--river-deep);
    color: #fff;
    padding: var(--s2) var(--s3);
    z-index: 200;
}
.skip-link:focus { left: 0; }

/* Read aloud, never seen — e.g. "(opens in a new tab)" after every outbound
   link; see external_link() in includes/site.php. Same name as admin.css. */
.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;
}

/* ---------------------------------------------------------------------------
   Header

   Sticky, and opaque cream rather than transparent-over-photo: the logo is dark
   line art and needs its own ground to stay legible. It also means the phone
   number and the Book link are reachable from anywhere on a long single page,
   which is the point of a one-pager.
   --------------------------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
}

.site-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s3);
    padding-block: var(--s2);
    min-height: var(--header-h);
}

.site-header__brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    padding-block: var(--s1);
}
/* Sized so the WORDMARK is legible, not so the artwork is a tidy size.
   "RIVER AND RAIL" occupies 24.5% of the trimmed file's height, so the rendered
   cap height is about a quarter of whatever is set here. Anything under about
   3rem leaves it a grey smudge no matter how sharp the file is — this is a size
   problem, not a contrast one.

   The base value is the NARROWEST phone, where the logo and the Menu button
   have to share roughly 280px: 3.25rem of logo is 133px wide and leaves the
   button comfortable room. It steps up twice from there. */
.site-header__brand img {
    max-height: 3.25rem;
    width: auto;
}

.site-header__wordmark {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--ink);
}

.nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--s2);
    min-height: 44px;
    padding: var(--s2) var(--s3);
    background: none;
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    color: var(--river);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
}
.nav-toggle:hover { border-color: var(--river); }

.nav-toggle__bars {
    width: 1.125rem;
    height: 2px;
    background: currentColor;
    box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}

.site-nav { flex-basis: 100%; }

.site-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--rule);
}

.site-nav__list a,
.site-nav__aside a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: var(--s2) 0;
    text-decoration: none;
    color: var(--ink);
    font-weight: 500;
}
.site-nav__list a:hover { color: var(--river); }

/* Set by assets/js/onepage.js on the section currently in view. Underlined as
   well as coloured, so it does not rely on colour alone.

   Matches on the attribute rather than on aria-current="page", because these
   links get aria-current="true" — every one of them points at the page you are
   already on, so "page" would be true of all four at once. The bare attribute
   selector also keeps the rule correct if this ever stops being a one-pager and
   the platform's own "page" comparison starts firing. */
.site-nav__list a[aria-current] {
    color: var(--river);
    font-weight: 650;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.3em;
}

.site-nav__aside {
    margin: 0;
    padding-block: var(--s2);
    border-top: 1px solid var(--rule);
}
.site-nav__aside a {
    color: var(--river);
    font-weight: 650;
}

/* Collapsed state applies only when nav.js has run — it adds .js to <html>.
   Without JavaScript the nav is simply a visible list. That is the fallback,
   not a bug.

   THE 62rem BREAKPOINT BELOW MUST MATCH the matchMedia query in
   assets/js/nav.js. Move one and you must move the other. */
.js .site-nav { display: none; }
.js .site-nav.is-open { display: block; }

/* Past the very narrowest phones there is room to give the wordmark its full
   size — about 15px of cap height, which is where it reads cleanly at arm's
   length. Restated in a pair with --header-h, as above. */
@media (min-width: 26em) {
    :root { --header-h: 4.75rem; }

    .site-header__brand img { max-height: 3.75rem; }
}

@media (min-width: 62rem) {
    /* Both restated together — see the note on --header-h. 4.5rem of logo puts
       the wordmark at about 18px, which is where it reads as a name rather than
       as a graphic. */
    :root { --header-h: 5.5rem; }

    .nav-toggle { display: none; }

    .site-header__brand img { max-height: 4.5rem; }

    .site-nav,
    .js .site-nav,
    .js .site-nav.is-open {
        display: flex;
        align-items: center;
        gap: var(--s5);
        flex-basis: auto;
    }

    .site-nav__list {
        display: flex;
        gap: var(--s5);
        border-top: 0;
    }
    .site-nav__list a,
    .site-nav__aside a {
        padding: 0;
        min-height: 0;
        font-size: 0.9375rem;
        /* "Things to do nearby" would otherwise break over two lines at the
           narrow end of this breakpoint and knock the row out of alignment. */
        white-space: nowrap;
    }
    .site-nav__aside {
        border-top: 0;
        border-left: 1px solid var(--rule);
        padding: var(--s1) 0 var(--s1) var(--s5);
    }
}

/* ---------------------------------------------------------------------------
   Hero

   A single photograph, a scrim, and four lines of text. The <picture> swaps a
   tall crop for a wide one at the breakpoint so the tracks still lead into the
   frame on a phone — a 16:9 landscape letterboxed into a portrait viewport
   loses exactly the part that makes the photograph work.
   --------------------------------------------------------------------------- */

.hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: min(78vh, 40rem);
    background: var(--river-deep);
    overflow: hidden;
}

.hero__media {
    position: absolute;
    inset: 0;
}
.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 60%;
}

/* Two scrims, not one. A single flat overlay dims the sky as much as the
   foreground and turns a golden-hour photograph grey; a bottom-weighted
   gradient plus a slight overall warm darkening keeps the light in the sky
   while still buying contrast where the text sits. */
.hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            to top,
            rgba(10, 22, 32, 0.88) 0%,
            rgba(10, 22, 32, 0.72) 22%,
            rgba(10, 22, 32, 0.28) 52%,
            rgba(10, 22, 32, 0.10) 100%
        );
}

.hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: var(--max);
    margin-inline: auto;
    padding: var(--s7) var(--gutter) var(--s6);
    color: #fff;
}

.hero__eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #f0d9bf;
    margin: 0 0 var(--s3);
}

.hero__title {
    color: #fff;
    margin: 0 0 var(--s3);
    max-width: 16em;
    text-shadow: 0 1px 24px rgba(6, 16, 24, 0.45);
}

.hero__lede {
    font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
    max-width: 32rem;
    color: #f2ede6;
    margin: 0 0 var(--s5);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s3);
    align-items: center;
}

/* The price, set as a plain fact rather than a sticker. It sits on the same row
   as the buttons at width and reads as part of the sentence, not a badge stuck
   over the photograph. */
.hero__price {
    display: flex;
    align-items: baseline;
    gap: var(--s2);
    margin: var(--s5) 0 0;
    padding-top: var(--s4);
    border-top: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff;
}
.hero__price b {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
    font-weight: 600;
    line-height: 1;
}
.hero__price span {
    font-size: 0.9375rem;
    color: #e6ddd2;
}

@media (min-width: 48em) {
    .hero { min-height: min(84vh, 44rem); }
    .hero__inner { padding-block: var(--s8) var(--s7); }
}

/* ---------------------------------------------------------------------------
   Buttons
   --------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: var(--s2) var(--s5);
    border: 1px solid var(--river);
    border-radius: var(--radius);
    background: var(--river);
    color: #fff;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.btn:hover {
    background: var(--river-lift);
    border-color: var(--river-lift);
    color: #fff;
}

/* Outlined, for the second action in a pair. On the hero it sits on a
   photograph, so it carries its own white border rather than the navy one. */
.btn--ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.65);
    color: #fff;
}
.btn--ghost:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: #fff;
    color: #fff;
}

/* The same outlined treatment on a pale ground. */
.btn--quiet {
    background: transparent;
    color: var(--river);
}
.btn--quiet:hover {
    background: var(--river);
    color: #fff;
}

/* ---------------------------------------------------------------------------
   Page head — used by privacy.php and 404.php, not by the home page.
   --------------------------------------------------------------------------- */

.page-head {
    padding-block: var(--s6) var(--s4);
    background: var(--paper-alt);
    border-bottom: 1px solid var(--rule);
}
.page-head__lede {
    max-width: var(--measure);
    color: var(--ink-soft);
    font-size: 1.0625rem;
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Section intro — an eyebrow, a heading, a rule, a paragraph.
   --------------------------------------------------------------------------- */

.intro { max-width: var(--measure); margin-bottom: var(--s6); }
.intro p:last-child { margin-bottom: 0; }
.intro__lede {
    font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem);
    color: var(--ink-soft);
}

/* A single sentence set large, used once, to carry the site's own words. */
.statement {
    font-family: var(--font-display);
    font-size: clamp(1.375rem, 1.1rem + 1.4vw, 2rem);
    line-height: 1.3;
    max-width: 22em;
    margin: 0;
    text-wrap: balance;
}
.statement--light { color: #fff; }

/* ---------------------------------------------------------------------------
   Steps — drive in, pay, park.

   Numbered because the order is the whole instruction. The numeral is the
   display serif at size, which makes the sequence readable at a glance from
   the top of the section without needing a graphic.
   --------------------------------------------------------------------------- */

.steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--s5);
    counter-reset: step;
}

.step {
    counter-increment: step;
    padding-top: var(--s4);
    border-top: 2px solid var(--rule);
}
.step::before {
    content: counter(step);
    display: block;
    font-family: var(--font-display);
    font-size: 2.25rem;
    line-height: 1;
    color: var(--ember);
    margin-bottom: var(--s2);
}
.step h3 { margin-bottom: var(--s2); }
.step p  { margin-bottom: 0; color: var(--ink-soft); }
.step p + p { margin-top: var(--s2); }

@media (min-width: 48em) {
    .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
}

/* ---------------------------------------------------------------------------
   Feature list — what is actually on the site.
   --------------------------------------------------------------------------- */

.features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--s4);
}

.feature {
    padding: var(--s4);
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
}
.feature h3 { margin-bottom: var(--s2); font-size: 1.125rem; }
.feature p  { margin-bottom: 0; color: var(--ink-soft); font-size: 0.9375rem; }

@media (min-width: 40em) {
    .features { grid-template-columns: repeat(2, 1fr); }
}

/* The one line under the features that points at /things-to-do. */
.more {
    margin: var(--s5) 0 0;
    max-width: var(--measure);
    font-size: 1.0625rem;
    color: var(--ink-soft);
}
.more a { font-weight: 600; }
@media (min-width: 64em) {
    .features { grid-template-columns: repeat(3, 1fr); }
}

/* ---------------------------------------------------------------------------
   Photographs

   Captions are real captions — they say what you are looking at and where it
   is.
   --------------------------------------------------------------------------- */

.shot { margin: 0; }
.shot img {
    width: 100%;
    border-radius: var(--radius-lg);
    background: var(--paper-alt);
}
.shot figcaption {
    margin-top: var(--s2);
    font-size: 0.875rem;
    color: var(--ink-soft);
}

/* Full-bleed photograph used as a divider between sections. */
.bleed {
    margin: 0;
    position: relative;
}
.bleed img {
    width: 100%;
    height: clamp(14rem, 42vw, 30rem);
    object-fit: cover;
}
.bleed figcaption {
    max-width: var(--max);
    margin-inline: auto;
    padding: var(--s2) var(--gutter) 0;
    font-size: 0.875rem;
    color: var(--ink-soft);
}

/* Photograph beside text. Stacks on a phone, photograph first. */
.split { display: grid; gap: var(--s5); align-items: center; }
.split__body > :last-child { margin-bottom: 0; }

@media (min-width: 56em) {
    .split { grid-template-columns: 1fr 1fr; gap: var(--s7); }
    .split--reverse .split__media { order: 2; }
}

.gallery {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--s3);
}

/* THE PHOTOGRAPHS ARE FORCED TO ONE HEIGHT, 3:2.
 *
 * Both are 16:9 today and would line up on their own, but the box is fixed so
 * that a 4:3 photograph added later does not stand taller than its neighbour
 * and drag its caption down. 3:2 loses 15.6% off the sides of a 16:9 source;
 * the picnic table sits well inside what survives.
 *
 * Two columns, not three, since 13 Oct 2026 — three of the original photos
 * were taken off the home page (see CLAUDE.md) and the best replacement went
 * to the hero.
 *
 * object-fit is what does the cropping; without it the images would simply
 * stretch. The width/height attributes stay on the markup regardless: they
 * reserve the right space before the stylesheet arrives, and CSS wins after. */
.gallery .shot img {
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

@media (min-width: 48em) {
    .gallery { grid-template-columns: repeat(2, 1fr); }
}

/* ---------------------------------------------------------------------------
   Dark band — used once, for the self-contained condition.

   That condition is the one piece of bad news on the page, and burying it would
   be worse for everyone: a van that is not self-contained arriving at dusk to
   be turned away is a wasted trip and an awkward conversation. Giving it its
   own dark band states it plainly and gets it over with.
   --------------------------------------------------------------------------- */

.band--dark {
    background: var(--river-deep);
    color: #f2ede6;
}
.band--dark h2 { color: #fff; }
.band--dark .eyebrow { color: #e8b98a; }
.band--dark a { color: #cfe0f0; }
.band--dark a:hover { color: #fff; }
.band--dark .flourish { background: var(--ember-lift); }
.band--dark .intro__lede { color: #c9d3dd; }

/* ---------------------------------------------------------------------------
   Payment panel

   The bank account has to be readable off a phone screen, in a van, possibly in
   the dark, and typed into an internet-banking app without a transposed digit.
   So it is set large, in a tabular-figure sans, on its own warm ground.
   --------------------------------------------------------------------------- */

.paybox {
    background: var(--paper-warm);
    border: 1px solid var(--rule);
    border-radius: var(--radius-lg);
    padding: var(--s4);
}

.payrow { margin: 0 0 var(--s4); }
.payrow:last-child { margin-bottom: 0; }

.payrow dt {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: var(--s1);
}
.payrow dd {
    margin: 0;
    font-size: 1.0625rem;
}

.payrow dd.payrow__number {
    font-size: clamp(1.125rem, 1rem + 1vw, 1.5rem);
    font-weight: 650;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
    word-break: break-word;
}

@media (min-width: 40em) {
    .paybox { padding: var(--s5); }
}

/* ---------------------------------------------------------------------------
   Definition list — the Find us details.
   --------------------------------------------------------------------------- */

.detail-list { display: grid; grid-template-columns: 1fr; gap: 0; margin: 0; }
.detail-list dt {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin-top: var(--s4);
}
.detail-list dt:first-child { margin-top: 0; }
.detail-list dd { margin: 0; font-size: 1.0625rem; }

/* ---------------------------------------------------------------------------
   Quicklinks — 404 only.
   --------------------------------------------------------------------------- */

.quicklinks {
    list-style: none;
    margin: 0 auto var(--s6);
    padding-inline: var(--gutter);
    max-width: var(--max);
    display: grid;
    gap: var(--s2);
}

.quicklinks__link {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: var(--s3);
    background: var(--paper-alt);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    text-decoration: none;
    font-weight: 600;
}
.quicklinks__link:hover { border-color: var(--river); }

@media (min-width: 40em) {
    .quicklinks { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
}

/* ---------------------------------------------------------------------------
   Things to do nearby — /things-to-do only.

   THESE PHOTOGRAPHS ARE NOT OURS, which is the one exception to the rule at the
   top of this file. They are other people's work under open licences, credited
   on the page; see includes/nearby.php. Everything else about the rule holds:
   real places, photographed, and no illustration or stock.

   Each place leads with the drive time, set in the ember accent, because "how
   far is it" is the first thing anybody asks and the answer has to be findable
   at a glance down a long page.
   --------------------------------------------------------------------------- */

/* In-page contents, in the page head. Wraps to as many lines as it needs; each
   link is a full 44px touch target. */
.jumps { margin-top: var(--s4); }
.jumps ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--s2);
}
.jumps a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--s3);
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 999px;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
}
.jumps a:hover { border-color: var(--river); }

.places {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--s6);
}

/* Places with no photograph, after the photographed ones in the same group. */
.places + .places--text { margin-top: var(--s6); }

/* Anchored from the day plans, so it has to clear the sticky header too. */
.place { scroll-margin-top: calc(var(--header-h) + var(--s3)); }

.place__photo { margin-bottom: var(--s3); }
.place__photo img { aspect-ratio: 3 / 2; object-fit: cover; }

.place h3 { margin-bottom: var(--s1); }

.place__meta {
    font-size: 0.875rem;
    color: var(--ink-soft);
    margin-bottom: var(--s3);
}
.place__meta strong { color: var(--ember); }

.place__summary {
    font-size: 1.0625rem;
    color: var(--ink);
}
.place__body p { max-width: var(--measure); }

.place__notes {
    margin: 0 0 var(--s3);
    padding: var(--s3) var(--s3) var(--s3) var(--s5);
    background: var(--paper-warm);
    border-radius: var(--radius-lg);
    font-size: 0.9375rem;
    max-width: var(--measure);
}
.place__notes li + li { margin-top: var(--s2); }

.place__link { margin-bottom: 0; font-weight: 600; }

/* The licence credit under each photograph. Quiet, but never hidden: the full
   credit is in #photo-credits and this points at it. */
.shot .credit {
    display: block;
    font-size: 0.75rem;
    color: var(--ink-soft);
}

@media (min-width: 48em) {
    .places { grid-template-columns: repeat(2, 1fr); gap: var(--s6) var(--s5); }

    /* The first of an odd number, across both columns with the photograph
       beside the text, so no place is left alone at the end of its group. */
    .place--wide {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--s5);
        align-items: start;
    }
    .place--wide .place__photo { margin-bottom: 0; }
    .place--wide > .place__body:only-child { grid-column: 1 / -1; }
}
@media (min-width: 64em) {
    .places--text { grid-template-columns: repeat(3, 1fr); }
}

/* Day plans, on the dark band. */
.plans {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--s4);
}
.plan {
    padding-top: var(--s3);
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.plan h3 { color: #fff; margin-bottom: var(--s2); }
.plan p { margin-bottom: 0; }

@media (min-width: 48em) {
    .plans { grid-template-columns: repeat(2, 1fr); gap: var(--s5); }
}
@media (min-width: 64em) {
    .plans { grid-template-columns: repeat(3, 1fr); }
}

/* A split whose columns start together rather than centring — the detail list
   is much longer than the paragraph beside it. */
.split--top { align-items: start; }

/* Two short closing paragraphs side by side, and the credits. */
.also { display: grid; gap: var(--s5); }
.also p { margin-bottom: 0; max-width: var(--measure); }
.also__title { font-size: 1.25rem; margin-bottom: var(--s2); }
.also__list { margin: 0; padding-left: var(--s4); max-width: var(--measure); }
.also__list li + li { margin-top: var(--s2); }

@media (min-width: 48em) {
    .also { grid-template-columns: repeat(2, 1fr); }
}

.credits {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
    color: var(--ink-soft);
    display: grid;
    gap: var(--s1);
}

/* ---------------------------------------------------------------------------
   Forms

   Inputs are 16px minimum so iOS does not zoom the page on focus, and touch
   targets are 44px minimum. Both are requirements, not preferences.
   --------------------------------------------------------------------------- */

/* HONEYPOT — LOAD-BEARING. DO NOT DELETE THIS RULE.
 *
 * spam_trap_fields() in includes/security.php emits a decoy field wrapped in
 * .hp. Bots fill it in; people never see it. If this rule goes missing the
 * field becomes visible, and a visitor who dutifully completes every field is
 * treated as a bot — spam_trap_reason() returns 'honeypot', the page reports
 * success to them, and the booking enquiry is discarded without ever being
 * sent. The failure is silent on both sides, which is what makes it dangerous.
 *
 * Off-screen rather than display:none, which some bots detect and skip. Must be
 * a class, never an inline style — the CSP forbids those. */
.hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form { max-width: var(--measure); }

label {
    display: block;
    margin-bottom: var(--s1);
    font-weight: 600;
    font-size: 0.9375rem;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
    width: 100%;
    min-height: 48px;
    padding: var(--s2) var(--s3);
    margin-bottom: var(--s4);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink);
    font: inherit;
    font-size: 1rem;
}
input:hover, textarea:hover { border-color: var(--ink-faint); }
input:focus, textarea:focus { border-color: var(--river); }

textarea { min-height: 8rem; resize: vertical; }

/* A hint sitting inside a label, so it stays on the same line as the field
   name and does not inherit the label's weight. */
label .hint { font-weight: 400; color: var(--ink-soft); }

.hint, .privacy { font-size: 0.875rem; color: var(--ink-soft); }
.privacy { margin-top: var(--s3); }

.notice {
    padding: var(--s3) var(--s4);
    margin-bottom: var(--s4);
    border-left: 3px solid;
    border-radius: var(--radius);
}
.notice--ok    { border-color: var(--ok);    background: var(--ok-bg);    color: var(--ok); }
.notice--error { border-color: var(--error); background: var(--error-bg); color: var(--error); }
.notice ul { margin: 0; padding-left: var(--s4); }
.notice p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */

.site-footer {
    background: var(--river-deep);
    color: #cdd6de;
    padding-block: var(--s7) var(--s4);
    margin-top: 0;
}

.site-footer a { color: #e8eef4; }
.site-footer a:hover { color: #fff; }

.site-footer__inner { display: grid; gap: var(--s5); }

@media (min-width: 40em) {
    .site-footer__inner { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
}

.site-footer .eyebrow {
    color: #e8b98a;
    margin-bottom: var(--s2);
}

.site-footer__block address { font-style: normal; }
.site-footer__block p { margin-bottom: var(--s2); }
.site-footer__list { list-style: none; margin: 0; padding: 0; }
.site-footer__list a, .site-footer__social a { display: inline-block; padding-block: var(--s1); }
.site-footer__social a + a { margin-left: var(--s3); }

/* The closing three, ranked in descending loudness: what the business owes the
   public, who built it, then the staff door. They share the legal line's
   gutters so the left edges align down the page.

   THE STAFF LINK MUST STAY THE QUIETEST THING HERE. If a later edit leaves all
   three the same size and colour, the staff door reads as a public feature —
   which is what this structure exists to prevent. */

.site-footer__legal {
    max-width: var(--max);
    margin: var(--s6) auto 0;
    padding: var(--s4) var(--gutter) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 0.875rem;
    color: #a9b6c2;
}

/* ONE RHYTHM FOR ALL THREE: var(--s3) of visible space between each line. Read
   the note on .site-footer__staff before changing any of these margins — the
   third is not the same number as the other two, deliberately. */

.site-footer__credit {
    max-width: var(--max);
    margin: var(--s3) auto 0;
    padding-inline: var(--gutter);
    font-size: 0.8125rem;
    color: #8e9daa;
}

/* Quietest thing on the page: smallest type, softest ink.
   ── WHY ITS MARGIN IS --s1 AND NOT --s3 LIKE THE LINE ABOVE ─────────────────
   The 44px target is taller than the 12px text inside it, and the link centres
   that text, so about 12px of the target already reads as blank space above the
   word. Giving this line the same --s3 margin as the credit makes the gap
   MEASURE equal and LOOK half as big again. --s1 plus that 12px lands on the
   same optical spacing as the other two.

   The target comes from min-height and centring, not padding-block. Padding
   would need a negative margin to reclaim the layout space, which would float
   this link's invisible hit area over the credit link above it and quietly
   steal its clicks. Do not "tidy" this back into padding. */
.site-footer__staff {
    max-width: var(--max);
    margin: var(--s1) auto 0;
    padding-inline: var(--gutter);
    font-size: 0.75rem;
}
.site-footer__staff a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: #74838f;
    text-decoration: none;
}
.site-footer__staff a:hover { color: #a9b6c2; text-decoration: underline; }