/* ==========================================================================
   New Farm CL Site, Stourport-on-Severn
   One stylesheet. No build step. Edit this file directly.

   Contents
     1.  Design tokens
     2.  Reset and base
     3.  Typography
     4.  Layout primitives
     5.  Header and navigation
     6.  Hero
     7.  Ledger strip
     8.  Sections and blocks
     9.  Media
     10. Facility rows
     11. Panels, notes and ratings
     12. Lists, tables and detail rows
     13. Buttons and links
     14. Form
     15. Nearby index
     16. Footer
     17. Motion and print
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   Colours are taken from the site's own photographs: black stained fence
   posts, low gold sun, mown grass, pale gravel, deep evening sky.
   Contrast ratios below are calculated, not estimated (WCAG 2.1 relative
   luminance). Anything used for text clears 4.5:1 against its ground.
   -------------------------------------------------------------------------- */
:root {
  /* Ground and ink */
  --ink: #14171a;        /* stained fence post. 16.5:1 on paper, 14.6:1 on paper-2 */
  --ink-2: #5c5952;      /* secondary text. 6.41:1 on paper, 5.67:1 on paper-2   */
  --paper: #f7f5f0;      /* pale gravel, page ground                             */
  --paper-2: #ece7de;    /* section tint                                         */
  --paper-dim: #c6cbd1;  /* secondary text on dark grounds. 6.33:1 on dusk       */

  /* Accents */
  --sun: #c8862f;        /* low sun. Ground only, never text on paper (2.79:1).
                            Carries --ink as its text at 5.92:1               */
  --sun-deep: #8f5415;   /* the same accent, safe as text: 5.59:1 on paper,
                            4.95:1 on paper-2                                 */
  --sun-light: #e0a855;  /* the accent on dark grounds: 4.87:1 on dusk,
                            8.49:1 on ink                                     */
  --sun-pale: #f0c98a;   /* the accent over a photograph. Clears 4.5:1 against
                            a scrim of 0.72 alpha even if the pixels beneath
                            were pure white, which is the hero's worst case  */
  --field: #4e6b42;      /* mown grass. 5.49:1 on paper, carries paper at 5.49:1 */
  --dusk: #2e4257;       /* deep evening sky. carries paper at 9.48:1            */
  --stone: #8c8578;      /* gravel mid tone. Rules and borders only, never text  */

  /* Derived surfaces */
  --rule: #d9d2c6;
  --rule-soft: rgba(20, 23, 26, 0.11);
  --rule-dark: rgba(247, 245, 240, 0.2);
  --scrim: 20, 23, 26;

  /* Type */
  --font-display: 'Sentient', 'Iowan Old Style', 'Palatino Linotype', Palatino,
    'Book Antiqua', Georgia, 'Times New Roman', serif;
  --font-body: 'Supreme', ui-sans-serif, system-ui, -apple-system,
    'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --step--1: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
  --step-0: clamp(1rem, 0.965rem + 0.17vw, 1.09rem);
  --step-1: clamp(1.15rem, 1.09rem + 0.3vw, 1.3rem);
  --step-2: clamp(1.35rem, 1.22rem + 0.62vw, 1.75rem);
  --step-3: clamp(1.7rem, 1.44rem + 1.25vw, 2.5rem);
  --step-4: clamp(2.05rem, 1.6rem + 2.2vw, 3.4rem);
  --step-5: clamp(2.5rem, 1.72rem + 3.7vw, 4.75rem);

  /* Space */
  --s-1: 0.5rem;
  --s-2: 0.75rem;
  --s-3: 1rem;
  --s-4: 1.5rem;
  --s-5: 2rem;
  --s-6: 3rem;
  --s-7: 4rem;
  --s-8: clamp(4rem, 9vw, 7rem);
  --s-9: clamp(5.5rem, 13vw, 10rem);

  /* Layout */
  --wrap: 80rem;
  --measure: 34rem;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --radius: 3px;
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

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

img { height: auto; }

button,
input,
textarea,
select {
  font: inherit;
  font-family: var(--font-body);
  color: inherit;
  letter-spacing: inherit;
  text-transform: none;
}

:focus-visible {
  outline: 3px solid var(--sun-deep);
  outline-offset: 3px;
  border-radius: 1px;
}

/* --sun-deep only reaches 2.95:1 against --ink, short of the 3:1 a focus
   indicator needs, so dark grounds get the lighter accent instead. */
.on-dark :focus-visible,
.menu :focus-visible,
.hero :focus-visible { outline-color: var(--sun-light); }

::selection {
  background: var(--sun);
  color: var(--ink);
}

/* Keeps a hyphenated place name whole. Released on very narrow screens, where
   a break is better than an overflow. */
.nowrap { white-space: normal; }
@media (min-width: 26rem) {
  .nowrap { white-space: nowrap; }
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--ink);
  color: var(--paper);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  text-decoration: none;
  transform: translateY(-120%);
}
.skip-link:focus { transform: translateY(0); }

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.017em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); line-height: 1.14; }
h4 { font-size: var(--step-1); line-height: 1.24; }

p { margin: 0 0 1.15em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 38rem;
}

.on-dark .lede { color: var(--paper-dim); }

.display {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.14;
  letter-spacing: -0.016em;
  max-width: 24ch;
}

.label {
  display: block;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 var(--s-4);
}
.label::before {
  content: '';
  display: block;
  width: 2.75rem;
  height: 1px;
  background: var(--stone);
  margin-bottom: 0.85rem;
}
.on-dark .label { color: var(--paper-dim); }
.on-dark .label::before { background: var(--rule-dark); }

.eyebrow {
  display: block;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 var(--s-3);
}
.on-dark .eyebrow { color: var(--sun-light); }

.quote {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1.3;
  letter-spacing: -0.012em;
  max-width: 28ch;
}
.quote cite {
  display: block;
  margin-top: var(--s-4);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.on-dark .quote cite { color: var(--paper-dim); }

.small {
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 42rem;
}
.on-dark .small { color: var(--paper-dim); }

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow { max-width: 58rem; }

/* One column until there is room for the twelve. Without this, children with
   no .col-* rule in force get auto-placed into a single 1/12 track and the
   copy comes out one word per line. */
.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5) clamp(1.25rem, 3vw, 2.5rem);
}

@media (min-width: 56rem) {
  .grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--s-6) clamp(1.25rem, 3vw, 2.5rem);
  }
}

.section { padding-block: var(--s-8); }
.section--tight { padding-block: var(--s-7); }
.section--tint { background: var(--paper-2); }
.section--ink { background: var(--ink); color: var(--paper); }
.section--dusk { background: var(--dusk); color: var(--paper); }

.section--ink h1, .section--ink h2, .section--ink h3,
.section--dusk h1, .section--dusk h2, .section--dusk h3 { color: var(--paper); }

.bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}
.on-dark .rule { border-color: var(--rule-dark); }

/* Column helpers used by the page layouts */
.col-full { grid-column: 1 / -1; }

@media (min-width: 56rem) {
  .col-a { grid-column: 1 / span 4; }        /* side rail       */
  .col-b { grid-column: 6 / span 7; }        /* offset main     */
  .col-half-l { grid-column: 1 / span 6; }
  .col-half-r { grid-column: 7 / span 6; }
  .col-wide { grid-column: 1 / span 9; }
  .col-mid { grid-column: 3 / span 8; }
}

/* --------------------------------------------------------------------------
   5. Header and navigation
   -------------------------------------------------------------------------- */
.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.header.is-scrolled {
  border-bottom-color: var(--rule);
  box-shadow: 0 1px 14px rgba(20, 23, 26, 0.05);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 4.5rem;
  padding-block: 0.75rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: inherit;
}
.brand img { width: 2.1rem; height: auto; }
.brand__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.18rem;
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.brand__place {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 0.18rem;
}

.nav { display: none; }

.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.9rem;
  background: none;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.menu-btn svg { width: 1rem; height: 1rem; }
.menu-btn .menu-btn__close { display: none; }
.menu-btn[aria-expanded='true'] .menu-btn__open { display: none; }
.menu-btn[aria-expanded='true'] .menu-btn__close { display: block; }

/* Desktop nav takes over from the menu button. This block must come AFTER the
   .menu-btn base rules above, or the base display wins on equal specificity. */
@media (min-width: 62rem) {
  .nav {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2.2vw, 2rem);
  }
  .nav a {
    position: relative;
    font-size: 0.9rem;
    letter-spacing: 0.01em;
    text-decoration: none;
    color: var(--ink);
    padding-block: 0.4rem;
  }
  .nav a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.22s ease;
  }
  .nav a:hover::after { transform: scaleX(1); }
  .nav a[aria-current='page'] { color: var(--ink); }
  .nav a[aria-current='page']::after {
    transform: scaleX(1);
    background: var(--sun);
    height: 2px;
  }
  .nav__call {
    margin-left: clamp(0.5rem, 1.5vw, 1.25rem);
    padding: 0.55rem 1rem !important;
    border: 1px solid var(--ink);
    border-radius: var(--radius);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .nav__call::after { display: none !important; }
  .nav__call:hover { background: var(--ink); color: var(--paper); }
  .menu-btn { display: none; }
}

.menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--ink);
  color: var(--paper);
  padding: var(--s-7) var(--gutter) var(--s-6);
  overflow-y: auto;
}
.menu[hidden] { display: none; }

.menu__close {
  position: absolute;
  top: 1.35rem;
  right: var(--gutter);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  background: none;
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius);
  color: var(--paper);
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.menu__close svg { width: 1rem; height: 1rem; }

.menu__list {
  list-style: none;
  margin: 0 0 var(--s-6);
  padding: 0;
}
.menu__list li { border-top: 1px solid var(--rule-dark); }
.menu__list li:last-child { border-bottom: 1px solid var(--rule-dark); }
.menu__list a {
  display: block;
  padding: 0.85rem 0;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 7vw, 2.4rem);
  line-height: 1.15;
  text-decoration: none;
  color: var(--paper);
}
.menu__list a[aria-current='page'] { color: var(--sun-light); }

.menu__contact a {
  display: block;
  color: var(--paper);
  text-decoration: none;
  font-size: var(--step-1);
  margin-bottom: 0.35rem;
}
.menu__contact a:hover { color: var(--sun-light); }

/* --------------------------------------------------------------------------
   6. Hero
   The scrim guarantees contrast rather than hoping for it. Worst case is a
   pure white pixel under the text; composited under --ink at alpha a, that
   leaves --paper at 4.63:1 when a = 0.62 and --sun-pale at 4.57:1 when
   a = 0.72. The text block is held to the lower 55% of the hero, where the
   gradient never drops below 0.74, so both clear AA with headroom.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(84vh, 46rem);
  background: var(--ink);
  color: var(--paper);
  isolation: isolate;
}
.hero--inner { min-height: min(52vh, 28rem); }

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 62%;
}
/* Narrow screens: the text fills the frame, so the scrim has to be a vertical
   wash. Alpha stays at or above 0.74 everywhere the text sits. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(var(--scrim), 0.92) 0%,
    rgba(var(--scrim), 0.88) 68%,
    rgba(var(--scrim), 0.74) 86%,
    rgba(var(--scrim), 0.4) 100%
  );
}

/* Wide screens: the text sits in a column down the left, so the scrim runs
   left to right instead and leaves the right of the photograph alone. The
   text never passes 60% of the viewport width, where the horizontal layer is
   still at 0.74, and the two layers compound rather than replace each other. */
@media (min-width: 62rem) {
  .hero::after {
    background:
      linear-gradient(to top,
        rgba(var(--scrim), 0.4) 0%,
        rgba(var(--scrim), 0.12) 40%,
        rgba(var(--scrim), 0.08) 100%),
      linear-gradient(to right,
        rgba(var(--scrim), 0.88) 0%,
        rgba(var(--scrim), 0.84) 48%,
        rgba(var(--scrim), 0.7) 64%,
        rgba(var(--scrim), 0.16) 84%,
        rgba(var(--scrim), 0) 100%);
  }
}

.hero__inner {
  width: 100%;
  padding-block: var(--s-8) clamp(2.25rem, 6vh, 4rem);
}

.hero__body { max-width: 42rem; }
.hero h1 {
  /* Held a little below --step-5 so "Stourport-on-Severn" always fits on one
     line inside the text column and never rags across its own hyphens. */
  font-size: clamp(2.1rem, 1.3rem + 3.5vw, 4.35rem);
  color: var(--paper);
}
.hero .lede {
  margin-top: var(--s-3);
  color: var(--paper);
  max-width: 32rem;
}
.hero .eyebrow { color: var(--sun-pale); }
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-5);
}

@media (max-width: 46rem) {
  .hero__inner { padding-block: var(--s-7) var(--s-6); }
}

/* Inner page heading block, on paper, above its photograph */
.pagehead { padding-block: var(--s-8) var(--s-6); }
.pagehead h1 { max-width: 18ch; }
.pagehead .lede { margin-top: var(--s-4); }

.crumbs {
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  color: var(--ink-2);
  margin-bottom: var(--s-5);
}
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.crumbs li + li::before {
  content: '/';
  margin-right: 0.6rem;
  color: var(--stone);
}
.crumbs a { color: var(--ink-2); }

/* --------------------------------------------------------------------------
   7. Ledger strip
   Five plain facts, ruled, no icons.
   -------------------------------------------------------------------------- */
.ledger {
  background: var(--ink);
  color: var(--paper);
}
.ledger__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.ledger__list li {
  padding: var(--s-4) 0;
  border-top: 1px solid var(--rule-dark);
}
.ledger__list li + li { border-left: 0; }
.ledger dt,
.ledger b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-2);
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--sun-light);
}
.ledger span {
  display: block;
  margin-top: 0.55rem;
  font-size: var(--step--1);
  line-height: 1.45;
  color: var(--paper-dim);
  max-width: 22ch;
}

@media (min-width: 40rem) {
  .ledger__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 62rem) {
  .ledger__list {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0 clamp(1.25rem, 3vw, 2.5rem);
  }
  .ledger__list li { padding-block: var(--s-5) var(--s-6); }
}

/* --------------------------------------------------------------------------
   8. Sections and blocks
   -------------------------------------------------------------------------- */
.stack > * + * { margin-top: var(--s-4); }
.stack--wide > * + * { margin-top: var(--s-5); }

.block__head { margin-bottom: var(--s-5); }

.overlap {
  position: relative;
  margin-top: clamp(-7rem, -9vw, -3rem);
  z-index: 2;
}

.quote-card {
  background: var(--dusk);
  color: var(--paper);
  padding: clamp(1.75rem, 5vw, 3.25rem);
  max-width: 34rem;
}

/* --------------------------------------------------------------------------
   9. Media
   -------------------------------------------------------------------------- */
.figure { margin: 0; }
.figure img {
  width: 100%;
  height: auto;
}

/* A 2:3 portrait at half the page runs to nearly 800px and swamps the column
   beside it. Held to 4:5 and biased towards the top of the frame, which is
   where the sky is in these photographs. */
.figure--tall img {
  aspect-ratio: 4 / 5;
  height: auto;
  object-fit: cover;
  object-position: 50% 20%;
}
.figure figcaption {
  margin-top: var(--s-3);
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 34rem;
}
.on-dark .figure figcaption { color: var(--paper-dim); }

.band {
  position: relative;
  background: var(--ink);
}
.band img {
  width: 100%;
  height: clamp(15rem, 44vh, 30rem);
  object-fit: cover;
  object-position: 50% 58%;
}
.band--tall img { height: clamp(18rem, 62vh, 40rem); }

/* --------------------------------------------------------------------------
   10. Facility rows
   The photograph sits beside the claim it proves. Offsets alternate so the
   page does not read as a mirrored two column grid.
   -------------------------------------------------------------------------- */
.facility {
  display: grid;
  gap: var(--s-5);
  padding-block: var(--s-7);
  border-top: 1px solid var(--rule);
}
.facility:first-of-type { border-top: 0; padding-top: var(--s-5); }

.facility__media img { width: 100%; }
.facility__body > * + * { margin-top: var(--s-3); }
.facility__body h3 { margin-bottom: 0.35rem; }

@media (min-width: 56rem) {
  .facility {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: start;
  }
  .facility__media { grid-column: 1 / span 4; }
  .facility__body { grid-column: 6 / span 6; padding-top: var(--s-2); }

  .facility--flip .facility__media { grid-column: 8 / span 5; grid-row: 1; }
  .facility--flip .facility__body { grid-column: 1 / span 6; grid-row: 1; }
}

/* --------------------------------------------------------------------------
   11. Panels, notes and ratings
   No coloured rails. A panel is a flat tinted surface with a uniform border.
   -------------------------------------------------------------------------- */
.panel {
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: clamp(1.35rem, 3.5vw, 2.25rem);
}
.panel > * + * { margin-top: var(--s-3); }
.panel h2,
.panel h3 { margin-bottom: 0.35rem; }

.panel--alert {
  background: var(--sun);
  border-color: #a86f22;
  color: var(--ink);
}
.panel--alert a { color: var(--ink); }
.panel--alert .panel__flag {
  display: block;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: var(--s-2);
}

.panel--dark {
  background: var(--dusk);
  border-color: transparent;
  color: var(--paper);
}
.panel--dark h2,
.panel--dark h3 { color: var(--paper); }

.ratings {
  display: grid;
  gap: var(--s-5);
}
.rating__figure {
  display: block;
  font-family: var(--font-display);
  font-size: var(--step-4);
  line-height: 1;
  letter-spacing: -0.03em;
}
.rating__source {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 26ch;
}
@media (min-width: 40rem) {
  .ratings { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6); }
}

/* --------------------------------------------------------------------------
   12. Lists, tables and detail rows
   -------------------------------------------------------------------------- */
.ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: 34rem;
}
.ticks li {
  position: relative;
  padding: 0.55rem 0 0.55rem 1.75rem;
  border-top: 1px solid var(--rule-soft);
}
.ticks li:first-child { border-top: 0; padding-top: 0; }
.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.15rem;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--field);
  border-radius: 50%;
}
.ticks li:first-child::before { top: 0.6rem; }
.on-dark .ticks li { border-color: var(--rule-dark); }
.on-dark .ticks li::before { background: var(--sun-light); }

.specs {
  margin: 0;
  display: grid;
  gap: 0;
}
.specs > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.15rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--rule);
}
.specs dt {
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.specs dd {
  margin: 0;
  font-size: var(--step-0);
}
.specs dd b { font-weight: 500; }
@media (min-width: 40rem) {
  .specs > div {
    grid-template-columns: 13rem minmax(0, 1fr);
    gap: var(--s-4);
    align-items: baseline;
  }
  .specs dt { padding-top: 0.15rem; }
}

.faq { border-top: 1px solid var(--rule); }
.faq__item {
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--rule);
}
.faq__item h3 { max-width: 30ch; }
.faq__item p {
  margin-top: var(--s-3);
  max-width: 44rem;
}

.coords {
  display: grid;
  gap: var(--s-2);
  margin: 0;
}
.coords > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem var(--s-3);
  padding: 0.75rem 0;
  border-top: 1px solid var(--rule);
}
.coords dt {
  flex: 0 0 8.5rem;
  font-size: var(--step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.coords dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.copy-btn {
  margin-left: auto;
  padding: 0.3rem 0.65rem;
  background: none;
  border: 1px solid var(--stone);
  border-radius: var(--radius);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.copy-btn:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}
.copy-btn[data-state='done'] {
  background: var(--field);
  border-color: var(--field);
  color: var(--paper);
}

/* --------------------------------------------------------------------------
   13. Buttons and links
   -------------------------------------------------------------------------- */
a {
  color: var(--ink);
  text-decoration-line: underline;
  text-decoration-color: var(--sun);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: text-decoration-thickness 0.15s ease, color 0.15s ease;
}
a:hover { text-decoration-thickness: 2px; }
.on-dark a,
.section--ink a,
.section--dusk a { color: var(--paper); text-decoration-color: var(--sun-light); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn svg { width: 1.05rem; height: 1.05rem; flex: none; }

.btn--primary {
  background: var(--sun);
  color: var(--ink);
  border-color: var(--sun);
}
.btn--primary:hover { background: #b3762a; border-color: #b3762a; }

.btn--ghost {
  background: none;
  color: var(--ink);
  border-color: var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

.on-dark .btn--ghost,
.hero .btn--ghost,
.section--ink .btn--ghost,
.section--dusk .btn--ghost {
  color: var(--paper);
  border-color: rgba(247, 245, 240, 0.55);
}
.on-dark .btn--ghost:hover,
.hero .btn--ghost:hover,
.section--ink .btn--ghost:hover,
.section--dusk .btn--ghost:hover {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.link-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration-color: var(--sun);
}
.link-more svg { width: 0.9rem; height: 0.9rem; }
.link-more:hover svg { transform: translateX(3px); }
.link-more svg { transition: transform 0.18s ease; }

.tel {
  font-family: var(--font-display);
  font-size: var(--step-3);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  text-decoration-thickness: 1px;
  white-space: nowrap;
}
.mail {
  font-size: var(--step-1);
  word-break: break-word;
}

/* --------------------------------------------------------------------------
   14. Form
   -------------------------------------------------------------------------- */
.form { max-width: 40rem; }
.form__row { margin-bottom: var(--s-4); }
.form__row--split {
  display: grid;
  gap: var(--s-4);
}
@media (min-width: 34rem) {
  .form__row--split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.form label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.form .req { color: var(--sun-deep); }

.form input,
.form textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  background: var(--paper);
  border: 1px solid var(--stone);
  border-radius: var(--radius);
  font-size: var(--step-0);
  line-height: 1.5;
  text-transform: none;
  letter-spacing: normal;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.form textarea { min-height: 8.5rem; resize: vertical; }
.form input:hover,
.form textarea:hover { border-color: var(--ink-2); }
.form input:focus,
.form textarea:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(200, 134, 47, 0.28);
}
.form input[aria-invalid='true'],
.form textarea[aria-invalid='true'] { border-color: #8f2c15; }

.form__error {
  display: none;
  margin-top: 0.4rem;
  font-size: var(--step--1);
  color: #8f2c15;
}
.form__error.is-shown { display: block; }

.form__hint {
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 40rem;
  margin-bottom: var(--s-4);
}

.form__status {
  margin-top: var(--s-4);
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--field);
  background: rgba(78, 107, 66, 0.09);
  font-size: var(--step--1);
  line-height: 1.55;
}
.form__status[hidden] { display: none; }

/* Bot trap. Clipped rather than pushed off to a negative offset, so it can
   never extend the document's scroll area. */
.honey {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   15. Nearby index
   No photography exists for these places, so this is set with type and space.
   -------------------------------------------------------------------------- */
.index { border-top: 1px solid var(--rule); }

.index__item {
  display: grid;
  gap: var(--s-2) clamp(1.5rem, 4vw, 3.5rem);
  padding-block: var(--s-6);
  border-bottom: 1px solid var(--rule);
}
.index__num {
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  color: var(--stone);
  font-variant-numeric: tabular-nums;
}
.index__name {
  font-family: var(--font-display);
  font-size: var(--step-3);
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin: 0;
}
.index__kind {
  display: block;
  margin-top: var(--s-2);
  font-size: var(--step--1);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.index__body p { max-width: 40rem; }

@media (min-width: 56rem) {
  .index__item {
    grid-template-columns: 3rem minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
  .index__num { padding-top: 0.7rem; }
}

/* --------------------------------------------------------------------------
   16. Footer
   -------------------------------------------------------------------------- */
.footer {
  background: var(--ink);
  color: var(--paper);
  padding-block: var(--s-8) var(--s-6);
}
.footer h2 {
  font-size: var(--step-2);
  color: var(--paper);
  max-width: 16ch;
}
.footer__grid {
  display: grid;
  gap: var(--s-6) clamp(1.5rem, 4vw, 3rem);
}
@media (min-width: 48rem) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 68rem) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

.footer address {
  font-style: normal;
  line-height: 1.7;
  color: var(--paper-dim);
}
.footer a { color: var(--paper); text-decoration-color: var(--sun-light); }

.footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer__list li + li { margin-top: 0.5rem; }
.footer__list a { text-decoration: none; }
.footer__list a:hover { text-decoration: underline; text-underline-offset: 0.22em; }

.footer__title {
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--paper-dim);
  margin: 0 0 var(--s-4);
}

.footer__foot {
  margin-top: var(--s-7);
  padding-top: var(--s-4);
  border-top: 1px solid var(--rule-dark);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  justify-content: space-between;
  font-size: var(--step--1);
  color: var(--paper-dim);
}
.footer__foot p { max-width: 46rem; margin: 0; }

.social {
  display: flex;
  gap: var(--s-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.social a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
  font-size: 0.9rem;
}
.social a:hover { text-decoration: underline; text-underline-offset: 0.22em; }
.social svg { width: 1rem; height: 1rem; }

/* --------------------------------------------------------------------------
   17. Motion and print
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media print {
  .header, .menu, .menu-btn, .hero__media, .band, .footer__list { display: none !important; }
  body { background: #fff; color: #000; }
  .hero, .section--ink, .section--dusk, .footer { background: #fff !important; color: #000 !important; }
  a::after { content: ' (' attr(href) ')'; font-size: 0.8em; }
}