/* bookdirectbyowner.ca
   ------------------------------------------------------------------
   Warm paper, ink, and one sea-green accent. Fraunces does the talking,
   Inter does the work. Everything sits on a 1200px measure with a
   generous gutter so the photographs get room to breathe. */

:root {
  --paper:      #F7F2E9;
  --paper-2:    #F1EADD;
  --paper-3:    #E7DECD;
  --card:       #FFFDF8;
  --ink:        #221F1A;
  --ink-2:      #494237;
  --muted:      #756B5B;
  --line:       #DED3C0;

  --sea:        #2C6A61;
  --sea-deep:   #1E4C46;
  --sea-soft:   #D8E6E1;
  --ember:      #B85631;
  --gold:       #B8913F;

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --r-sm: 6px;
  --r:    12px;
  --r-lg: 20px;

  --shadow:    0 1px 2px rgba(34,31,26,.05), 0 8px 24px -12px rgba(34,31,26,.18);
  --shadow-lg: 0 2px 4px rgba(34,31,26,.06), 0 24px 60px -24px rgba(34,31,26,.30);

  --wrap: 74rem;
  --gutter: clamp(1.15rem, 4vw, 3rem);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 clamp(1rem, .96rem + .18vw, 1.075rem)/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  /* A faint linen tooth, so the paper is not a flat swatch. */
  background-image:
    radial-gradient(circle at 12% 18%, rgba(184,145,63,.055), transparent 42%),
    radial-gradient(circle at 88% 72%, rgba(44,106,97,.05), transparent 48%);
  background-attachment: fixed;
}

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

a { color: var(--sea-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--ember); }

:focus-visible {
  outline: 2.5px solid var(--sea);
  outline-offset: 3px;
  border-radius: 3px;
}

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

.skip {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -140%);
  z-index: 60; background: var(--ink); color: var(--paper);
  padding: .7rem 1.2rem; border-radius: 0 0 var(--r) var(--r);
  font-weight: 500; text-decoration: none;
}
.skip:focus { transform: translate(-50%, 0); color: var(--paper); }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.go { display: inline-block; margin-left: .38em; transition: transform .22s ease; }
a:hover .go, button:hover .go { transform: translateX(3px); }


/* ─────────────────────────────  HEADER  ───────────────────────────── */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247,242,233,.86);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 4.2rem;
}

.mark {
  font-family: var(--serif);
  font-size: 1.32rem; letter-spacing: -.018em;
  text-decoration: none; color: var(--ink);
  display: flex; align-items: baseline; gap: .06em;
}
.mark-1 { font-weight: 400; }
.mark-2 { font-weight: 600; color: var(--sea-deep); }
.mark-3 {
  font-family: var(--sans); font-size: .62rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); margin-left: .5em;
  border-left: 1px solid var(--line); padding-left: .55em;
}

.nav { display: flex; align-items: center; gap: clamp(.9rem, 2.2vw, 1.8rem); }
.nav a {
  font-size: .9rem; font-weight: 500; color: var(--ink-2);
  text-decoration: none;
}
.nav a:hover { color: var(--ember); }
.nav-cta {
  background: var(--sea-deep); color: var(--paper) !important;
  padding: .5rem .95rem; border-radius: 100px;
}
.nav-cta:hover { background: var(--ember); }

@media (max-width: 640px) {
  .mark-3 { display: none; }
  .nav a:not(.nav-cta) { display: none; }
}


.eyebrow {
  font-size: .68rem; font-weight: 600; letter-spacing: .19em;
  text-transform: uppercase; color: var(--gold);
  margin: 0 0 .9rem;
}

/* ─────────────────────────────  SECTIONS  ─────────────────────────── */

.section { padding-block: clamp(3.4rem, 8vw, 6.5rem); }

.section h2 {
  font-family: var(--serif);
  font-size: clamp(1.85rem, 1.3rem + 2.4vw, 3.1rem);
  font-weight: 500; line-height: 1.06; letter-spacing: -.028em;
  margin: 0 0 .8rem; max-width: 20ch; text-wrap: balance;
}

.section-intro {
  max-width: 54ch; margin: 0 0 2.4rem;
  color: var(--ink-2); font-size: 1.05rem;
}
.list-inner .section-intro { margin-bottom: 0; }


/* ─────────────────────────────  FILTERS  ─────────────────────────── */

.filters {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1.1rem clamp(1rem, 2.5vw, 1.6rem) 1.2rem;
  box-shadow: var(--shadow);
  margin-bottom: 1.2rem;
}

.filter-row {
  display: flex; flex-wrap: wrap; gap: .9rem 1.2rem; align-items: flex-end;
}
.filter-row + .filter-row {
  margin-top: 1.05rem; padding-top: 1.05rem;
  border-top: 1px dashed var(--line);
  align-items: center;
}

.field { display: flex; flex-direction: column; gap: .3rem; flex: 0 1 auto; }
.field-search { flex: 1 1 15rem; }
.field-price  { flex: 1 1 13rem; }

.field-label {
  font-size: .64rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.field-label b { color: var(--sea-deep); font-weight: 600; }

.field input[type="search"], .field select {
  font: 500 .95rem/1.3 var(--sans); color: var(--ink);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: .55rem .7rem;
  min-width: 6.5rem; width: 100%;
}
.field input[type="search"]::placeholder { color: #A2988A; font-weight: 400; }
.field select { cursor: pointer; }

.field input[type="range"] {
  width: 100%; accent-color: var(--sea); cursor: pointer; margin: .35rem 0 0;
}

.chips { display: flex; flex-wrap: wrap; gap: .4rem; flex: 1 1 auto; }
.chip {
  font: 500 .82rem/1 var(--sans); color: var(--ink-2);
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 100px; padding: .46rem .8rem; cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.chip:hover { border-color: var(--sea); color: var(--sea-deep); }
.chip[aria-pressed="true"] {
  background: var(--sea-deep); border-color: var(--sea-deep); color: var(--paper);
}

.reset {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  font: 500 .84rem/1 var(--sans); color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px; padding: .4rem;
}
.reset:hover { color: var(--ember); }

.result-line {
  margin: 0 0 1.6rem; font-size: .88rem; color: var(--muted);
}
.result-line b { color: var(--ink); font-weight: 600; }

.empty {
  text-align: center; color: var(--muted); padding: 3rem 1rem;
  font-family: var(--serif); font-size: 1.15rem;
}
.link-btn {
  background: none; border: 0; padding: 0; cursor: pointer; font: inherit;
  color: var(--sea-deep); text-decoration: underline; text-underline-offset: 3px;
}


/* ──────────────────────────────  CARDS  ──────────────────────────── */

/* Capped tracks rather than 1fr, and centred: with only a couple of
   listings, stretched cards read as a page with something missing. */
.cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1.3rem, 3vw, 2.2rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 24rem));
  justify-content: center;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease;
}
.card:hover, .card:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--paper-3);
}
.card[data-selected="true"] {
  border-color: var(--sea);
  box-shadow: 0 0 0 2px var(--sea-soft), var(--shadow-lg);
}

.card-figure {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--paper-3);
}
.card-figure img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s cubic-bezier(.2,.7,.3,1);
}
.card:hover .card-figure img { transform: scale(1.045); }
/* A carousel slide that also crept forward on hover would fight the
   track it sits on. */
.card:hover .card-shots img { transform: none; }

/* Sample listings have no photographs yet, so they get drawn instead of
   faked: a horizon in the listing's own two colours. */
.card-art { position: absolute; inset: 0; }
.card-art svg { width: 100%; height: 100%; display: block; }
.card-art-note {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: .55rem .85rem; font-size: .7rem; letter-spacing: .04em;
  color: rgba(255,253,248,.82); background: linear-gradient(to top, rgba(20,18,15,.5), transparent);
}

.card-badge {
  position: absolute; top: .7rem; left: .7rem;
  font: 600 .66rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  background: rgba(251,247,239,.94); color: var(--sea-deep);
  padding: .42rem .6rem; border-radius: 100px;
}
.card-badge[data-sample="true"] { color: var(--muted); }

.card-price {
  position: absolute; bottom: .7rem; right: .7rem;
  font: 600 .82rem/1 var(--sans);
  background: var(--ink); color: var(--paper);
  padding: .46rem .72rem; border-radius: 100px;
}
.card-price small { font-weight: 400; opacity: .7; }

.card-body { padding: 1.15rem 1.25rem 1.35rem; display: flex; flex-direction: column; flex: 1; }

.card-place {
  font-size: .7rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 .35rem;
}
.card-name {
  font-family: var(--serif); font-size: 1.42rem; font-weight: 500;
  letter-spacing: -.02em; line-height: 1.12; margin: 0 0 .45rem;
}
.card-name a { color: inherit; text-decoration: none; }
.card-name a::after { content: ""; position: absolute; inset: 0; }
.card { position: relative; }

.card-tagline {
  margin: 0 0 1rem; color: var(--ink-2); font-size: .93rem; line-height: 1.55;
}

.card-meta {
  margin: auto 0 0; padding-top: .9rem; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: .3rem .9rem;
  font-size: .82rem; color: var(--muted);
}
.card-meta b { color: var(--ink-2); font-weight: 600; }

.card-foot { margin: .8rem 0 0; }

/* --- clicking through a card's photographs ---

   The same machinery as the popup carousel at a card's size. Everything
   here has to out-stack .card-name a::after, the invisible sheet that
   makes the whole tile a link, or the arrows would be unclickable. */

.card-track {
  display: flex; height: 100%;
  transition: transform .5s cubic-bezier(.2,.7,.3,1);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) { .card-track { transition: none; } }

.card-slide { position: relative; flex: 0 0 100%; height: 100%; }
.card-slide img { width: 100%; height: 100%; object-fit: cover; }

.card-arw {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 2rem; height: 2rem; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(251,247,239,.9); color: var(--ink);
  backdrop-filter: blur(6px); box-shadow: var(--shadow);
  opacity: 0; transition: opacity .2s ease, background .2s ease;
}
.card-arw-prev { left: .5rem; }
.card-arw-next { right: .5rem; }
.card:hover .card-arw, .card:focus-within .card-arw,
.card-arw:focus-visible { opacity: 1; }
.card-arw:hover { background: #fff; }
@media (hover: none) { .card-arw { opacity: 1; } }

.card-dots {
  position: absolute; left: 0; right: 0; bottom: .6rem; z-index: 3;
  display: flex; justify-content: center; gap: .3rem; pointer-events: none;
}
.card-dots i {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,253,248,.5);
  box-shadow: 0 1px 2px rgba(20,18,15,.35);
  transition: transform .25s ease, background .25s ease;
}
.card-dots i[data-on] { background: #FFFDF8; transform: scale(1.4); }

.card-count {
  position: absolute; left: .7rem; bottom: .7rem; z-index: 3;
  background: rgba(20,18,15,.62); color: #FBF7EF;
  backdrop-filter: blur(6px);
  font-size: .7rem; font-weight: 500; letter-spacing: .02em;
  padding: .28rem .6rem; border-radius: 100px;
}
.card-of { opacity: .6; margin-inline: .1em; }

.card-badge, .card-price { z-index: 3; }


/* ──────────────────────────────  MAP  ─────────────────────────────── */

/* Edge to edge. The map is the orientation device for the whole page, and
   a map in a column is a picture of a map. */
.mapwrap {
  position: relative;
  height: clamp(30rem, 80vh, 48rem);
  background: var(--paper-3);
  border-block: 1px solid var(--line);
}
#mapcanvas { position: absolute; inset: 0; }

.map-fallback { padding: 2rem; color: var(--muted); text-align: center; }

.legend-btn {
  background: rgba(255,253,248,.94); border: 1px solid var(--line);
  cursor: pointer; backdrop-filter: blur(8px);
  font: 500 .78rem/1 var(--sans); color: var(--ink-2);
  padding: .55rem .9rem; border-radius: 100px;
  display: inline-flex; align-items: center; gap: .45rem;
  box-shadow: var(--shadow);
  transition: border-color .2s ease, color .2s ease;
}
.legend-btn:hover { border-color: var(--sea); color: var(--sea-deep); }
.ico-dot {
  width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--ember); box-shadow: 0 0 0 3px rgba(184,86,49,.22);
}

.mapwrap .legend-btn { position: absolute; z-index: 2; left: 1rem; top: 1rem; }
.mapwrap .map-credit {
  position: absolute; z-index: 2; left: 1rem; bottom: .7rem;
  font-size: .68rem; color: var(--muted);
  background: rgba(255,253,248,.82); padding: .2rem .5rem; border-radius: 100px;
}
.map-credit a { color: var(--muted); }

.btn {
  display: inline-flex; align-items: center;
  background: var(--sea-deep); color: var(--paper); text-decoration: none;
  font: 600 .88rem/1 var(--sans); padding: .72rem 1.15rem; border-radius: 100px;
  border: 0; cursor: pointer; transition: background .2s ease;
}
.btn:hover { background: var(--ember); color: var(--paper); }
.btn-ghost {
  background: transparent; color: var(--ink-2);
  border: 1px solid var(--line);
}
.btn-ghost:hover { background: var(--paper-2); color: var(--sea-deep); }
.btn-block { width: 100%; justify-content: center; }


/* ─────────────────────────  WALKING DISTANCE  ────────────────────── */

.walks {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: .65rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}

.walk {
  width: 100%; text-align: left; cursor: pointer;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r); padding: .85rem .95rem;
  display: grid; grid-template-columns: auto 1fr; gap: .1rem .75rem;
  font: inherit; color: var(--ink);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.walk:hover { border-color: var(--sea); transform: translateY(-2px); }
.walk[aria-pressed="true"] {
  border-color: var(--sea); background: var(--sea-soft);
}

.walk-ico {
  grid-row: span 3; align-self: start;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--paper-2); color: var(--sea-deep);
  display: grid; place-items: center;
  border: 1px solid var(--line);
}
.walk[aria-pressed="true"] .walk-ico { background: var(--card); border-color: var(--sea); }
.walk-ico svg { width: 1rem; height: 1rem; }

.walk-name { font-weight: 600; font-size: .95rem; line-height: 1.3; }
.walk-time {
  font-size: .8rem; color: var(--sea-deep); font-weight: 500;
  display: flex; align-items: center; gap: .3rem; margin-top: .1rem;
}
.walk-time .ico { flex: 0 0 auto; }
.walk-sep { color: var(--line); }
.walk-blurb {
  font-size: .82rem; color: var(--muted); line-height: 1.5; margin-top: .3rem;
}


/* ───────────────────────────  MAP PIECES  ────────────────────────── */

/* Waypoint for a listing. A name badge at every waypoint turns the map
   into a wall of text, so the marker shows a small photograph of the place
   instead — recognisable at a glance, and it never quotes a rate the owner
   has not confirmed. The bubble carries the name. The text pin below is
   kept for the listing page's own "you are here" marker. */
.pin {
  cursor: pointer; position: relative;
  /* A marker element is laid out in normal flow inside MapLibre's canvas
     container, so a block-level flex box would stretch to the map's full
     width. Buttons shrink on their own; a div does not. */
  width: max-content;
  display: flex; align-items: center;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 100px; padding: .4rem .75rem;
  box-shadow: 0 1px 2px rgba(34,31,26,.10), 0 6px 16px -8px rgba(34,31,26,.35);
  font: 600 .8rem/1 var(--sans); color: var(--ink);
  white-space: nowrap;
  transform-origin: bottom center;
  transition: transform .22s cubic-bezier(.2,.7,.3,1), background .22s ease,
              color .22s ease, border-color .22s ease;
}
.pin b { font-weight: 600; }
.pin:hover { transform: scale(1.08); border-color: var(--ink); }
.pin[data-active="true"] {
  background: var(--ink); border-color: var(--ink); color: var(--paper);
  transform: scale(1.1); z-index: 3;
}

/* The photograph waypoint: a round thumbnail in a pale frame with a small
   pointer beneath it, so it reads as a pin dropped on its coordinate rather
   than a sticker floating over the map. The picture is the marker; the tip
   is where the place is. A listing with no photographs yet shows its emoji
   in the same frame. The whole teardrop shares one soft drop-shadow so the
   circle and the pointer read as a single object. */
.pin-photo {
  padding: 0; border: 0; background: none; box-shadow: none;
  border-radius: 0; overflow: visible;
  width: 2.6rem; height: 3.05rem;              /* circle + pointer */
  transform-origin: bottom center;
  filter: drop-shadow(0 3px 5px rgba(34,31,26,.42));
}
.pin-thumb, .pin-emoji {
  position: absolute; top: 0; left: 0;
  width: 2.6rem; height: 2.6rem;
  border-radius: 50%; box-sizing: border-box;
  border: 2px solid var(--card); background: var(--paper-2);
}
.pin-thumb { object-fit: cover; display: block; }
.pin-emoji { display: grid; place-items: center; font-size: 1.35rem; line-height: 1; }
/* The pointer: a small triangle whose tip is the anchor point. */
.pin-photo::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: .78rem; height: .5rem; transform: translateX(-50%);
  background: var(--card);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
}
.pin-photo:hover { transform: scale(1.08); }
.pin-photo[data-active="true"] {
  background: none; transform: scale(1.12); z-index: 3;
}
.pin-photo[data-active="true"] .pin-thumb,
.pin-photo[data-active="true"] .pin-emoji { border-color: var(--ink); }
.pin-photo[data-active="true"]::after { background: var(--ink); }

/* When two or more waypoints share a point they fan out around it, which
   would leave the real spot unmarked. This small dot sits on that spot so
   the fan reads as pins orbiting a place rather than floating over nothing.
   It takes no clicks, so a tap on the ground still deselects. */
.pin-anchor {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--ink); border: 2px solid var(--card);
  box-shadow: 0 1px 3px rgba(34, 31, 26, .4);
  pointer-events: none;
}

/* The listing's own page has one waypoint, and there it should say which
   door the walking times are measured from. */
.pin-home {
  background: var(--sea-deep); border-color: var(--sea-deep); color: var(--paper);
}

/* Waypoint for a landmark in the walking list. Smaller, quieter. */
.spot {
  cursor: pointer;
  width: 1.55rem; height: 1.55rem; border-radius: 50%;
  background: var(--card); border: 1.5px solid var(--sea);
  color: var(--sea-deep);
  display: grid; place-items: center;
  box-shadow: var(--shadow);
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.spot svg { width: .82rem; height: .82rem; }
.spot:hover { transform: scale(1.18); }
.spot[data-active="true"] {
  background: var(--sea-deep); color: var(--paper); border-color: var(--sea-deep);
  transform: scale(1.25);
}

/* The head of the walk. `width: max-content` for the same reason .pin
   needs it — a bare marker element stretches to the map's full width. */
.walker {
  width: max-content; pointer-events: none;
  display: grid; place-items: center;
}
.walker::before {
  content: ""; grid-area: 1 / 1;
  width: .72rem; height: .72rem; border-radius: 50%;
  background: var(--ember); border: 2px solid var(--paper);
  box-shadow: 0 1px 6px rgba(34, 31, 26, .35);
}
/* A slow ring so the dot reads as moving even where the route doubles
   back on itself and the line stops visibly growing. */
.walker::after {
  content: ""; grid-area: 1 / 1;
  width: .72rem; height: .72rem; border-radius: 50%;
  border: 1.5px solid var(--ember);
  animation: walker-ring 1.4s ease-out infinite;
}
@keyframes walker-ring {
  from { transform: scale(1); opacity: .55; }
  to   { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .walker::after { animation: none; } }

/* MapLibre popups, re-skinned to the paper palette. */
.maplibregl-popup-content {
  padding: 0; border-radius: var(--r); overflow: hidden;
  background: var(--card); box-shadow: var(--shadow-lg);
  font-family: var(--sans);
}
.maplibregl-popup-tip { border-top-color: var(--card) !important; border-bottom-color: var(--card) !important; }
.maplibregl-popup-close-button {
  font-size: 1.25rem; color: var(--muted); padding: .1rem .45rem;
}
.maplibregl-popup-close-button:hover { background: transparent; color: var(--ember); }

.pop { width: 19rem; max-width: 80vw; }
.pop-figure { position: relative; aspect-ratio: 4 / 3; background: var(--paper-3); overflow: hidden; }
.pop-figure > img, .pop-figure > svg { width: 100%; height: 100%; object-fit: cover; }

/* The waypoint bubble's face: one big best-fit emoji on the paper wash,
   standing in for a photo the landmark doesn't have. */
.pop-emoji {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 9;
  background: linear-gradient(160deg, var(--paper-2), var(--paper-3));
}
.pop-emoji > span { font-size: 3.4rem; line-height: 1; filter: saturate(1.05); }

/* --- the bubble's carousel ---

   A row of slides moved by whole widths. The images are laid out at 100%
   of the frame each, so the track is N frames wide and one transform gets
   to any of them. */
.pop-track {
  display: flex; height: 100%;
  transition: transform .32s cubic-bezier(.3,.8,.35,1);
}
@media (prefers-reduced-motion: reduce) { .pop-track { transition: none; } }

.pop-slide { position: relative; flex: 0 0 100%; height: 100%; }
.pop-slide img { width: 100%; height: 100%; object-fit: cover; }
/* The photograph opens the listing. It sits under the arrows and dots, so
   paging never triggers it. */
.pop-link { display: block; width: 100%; height: 100%; cursor: pointer; }
.pop-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.6rem .7rem .5rem; font-size: .7rem; color: #FBF7EF;
  background: linear-gradient(to top, rgba(20,18,15,.7), transparent);
  pointer-events: none;
}

.pop-arw {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 1.8rem; height: 1.8rem; border-radius: 50%;
  background: rgba(255,253,248,.92); border: 0; cursor: pointer;
  color: var(--ink); display: grid; place-items: center; padding: 0;
  box-shadow: 0 1px 6px rgba(20,18,15,.28);
  opacity: 0; transition: opacity .18s ease, background .18s ease;
}
.pop-arw-prev { left: .45rem; }
.pop-arw-next { right: .45rem; }
.pop-shots:hover .pop-arw, .pop-arw:focus-visible { opacity: 1; }
.pop-arw:hover { background: #fff; }
/* Touch has no hover to reveal them with, so they simply stay. */
@media (hover: none) { .pop-arw { opacity: 1; } }

.pop-dots {
  position: absolute; left: 0; right: 0; bottom: .5rem;
  display: flex; justify-content: center; gap: .28rem; pointer-events: none;
}
.pop-dots i {
  width: .3rem; height: .3rem; border-radius: 50%;
  background: rgba(255,253,248,.55); transition: background .2s ease, transform .2s ease;
}
.pop-dots i[data-on] { background: #FFFDF8; transform: scale(1.35); }

.pop-count {
  position: absolute; right: .5rem; top: .5rem;
  font: 500 .68rem/1 var(--sans); color: #FBF7EF;
  background: rgba(20,18,15,.58); backdrop-filter: blur(4px);
  padding: .25rem .5rem; border-radius: 100px;
}
.pop-of { opacity: .6; margin-inline: .1em; }

.pop-body { padding: .85rem .95rem 1rem; }
.pop-name a { color: inherit; text-decoration: none; }
.pop-name a:hover { color: var(--ember); }
.pop-facts b { color: var(--ink); font-weight: 600; }
.pop-place {
  font-size: .63rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 .25rem;
}
.pop-name {
  font-family: var(--serif); font-size: 1.18rem; font-weight: 500;
  letter-spacing: -.018em; margin: 0 0 .35rem; line-height: 1.15;
}
.pop-text { margin: 0 0 .7rem; font-size: .82rem; color: var(--ink-2); line-height: 1.5; }
.pop-facts {
  margin: 0 0 .75rem; font-size: .75rem; color: var(--muted);
  display: flex; flex-wrap: wrap; gap: .2rem .6rem;
}
.pop-cta {
  display: inline-flex; align-items: center;
  font: 600 .78rem/1 var(--sans); color: var(--paper); background: var(--sea-deep);
  border: 0; cursor: pointer; padding: .55rem .9rem; border-radius: 100px;
}
.pop-cta:hover { background: var(--ember); }

.pop-spot .pop-name { font-size: 1.05rem; }
.pop-spot .pop-body { padding-top: .8rem; }
.pop-dist {
  font: 600 .76rem/1 var(--sans); color: var(--sea-deep);
  display: flex; align-items: center; gap: .35rem; margin: 0 0 .4rem;
}

.ico { flex: 0 0 auto; vertical-align: -.15em; }


/* ─────────────────────────────  LIST CTA  ────────────────────────── */

.section-list { background: var(--paper-2); border-block: 1px solid var(--line); }

/* One centred column: with the copy this short, two columns left more
   white space than content on either side. */
.list-inner {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: clamp(1.6rem, 4vw, 2.4rem);
  max-width: 44rem; margin-inline: auto;
}

.list-actions { margin: 1.2rem 0 0; }

/* Three plain sentences did not read as three steps. As a card of
   left-aligned rows — each with its own badge — the eye takes the shape
   of the deal before it reads a word of it. */
.list-notes {
  list-style: none; margin: 0; padding: 0; width: 100%;
  text-align: left;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.note {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: clamp(.85rem, 3vw, 1.15rem);
  padding: clamp(1.05rem, 3.2vw, 1.35rem) clamp(1.1rem, 4vw, 1.6rem);
}
.note + .note { border-top: 1px solid var(--line); }

.note-ico {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  color: var(--sea-deep);
  background: var(--sea-soft);
  box-shadow: inset 0 0 0 1px rgba(44,106,97,.14);
}

.note-body b {
  display: block; font-family: var(--serif);
  font-size: 1.08rem; font-weight: 500; letter-spacing: -.01em;
  color: var(--ink); margin-bottom: .15rem;
}
.note-body p {
  margin: 0; font-size: .93rem; line-height: 1.55; color: var(--ink-2);
  max-width: 46ch;
}

/* The last row is a promise about what we don't do, so it reads in a
   warmer ink than the two that describe work. */
.note-we .note-ico {
  color: #7A5E15; background: rgba(184,145,63,.16);
  box-shadow: inset 0 0 0 1px rgba(184,145,63,.26);
}
.note-never .note-ico {
  color: var(--ember); background: rgba(184,86,49,.12);
  box-shadow: inset 0 0 0 1px rgba(184,86,49,.22);
}
.note-never .note-body b { color: var(--ember); }


/* ──────────────────────────────  FOOTER  ─────────────────────────── */

.site-footer {
  background: var(--ink); color: rgba(247,242,233,.72);
  padding-block: clamp(2.4rem, 5vw, 3.6rem);
}
.footer-inner {
  display: flex; flex-wrap: wrap; gap: 1.6rem 3rem;
  justify-content: space-between; align-items: flex-start;
}
.footer-mark {
  font-family: var(--serif); font-size: 1.3rem; font-weight: 500;
  color: var(--paper); margin: 0 0 .3rem; letter-spacing: -.02em;
}
.footer-mark span { color: var(--gold); }
/* The brand and the fine print sit together on the right, so the crawl
   path — the town and about columns — leads on the left. */
.footer-brand { max-width: 32rem; margin-left: auto; text-align: right; }
.footer-sub { margin: 0; font-size: .88rem; }
.footer-made { margin: .45rem 0 0; font-size: .82rem; }
.site-footer a { color: var(--gold); }
.site-footer a:hover { color: #F0D9A6; }

@media (max-width: 640px) {
  .footer-brand { max-width: none; margin-left: 0; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}


/* ═════════════════════════  LISTING PAGE  ═══════════════════════════
   One listing, from its own generated file. It reuses the card, walk, pin
   and popup rules above; what follows is only what is new to it.

   No hero slab and no call to action above the fold. The page opens on the
   name and the photographs, and the one place to act rides alongside the
   story where somebody has actually read something first. */

.stay-loading {
  padding-block: clamp(4rem, 12vw, 8rem); text-align: center;
  color: var(--muted); font-family: var(--serif); font-size: 1.2rem;
}

.stay-top { padding-top: clamp(1.6rem, 4vw, 2.6rem); }

.stay-back { margin: 0 0 1.4rem; font-size: .85rem; }
.stay-back a {
  color: var(--muted); text-decoration: none; font-weight: 500;
}
.stay-back a:hover { color: var(--ember); }

.stay-where {
  font-size: .68rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 .5rem;
}

.stay-top h1 {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 1.4rem + 3.2vw, 3.6rem);
  font-weight: 500; line-height: 1.02; letter-spacing: -.032em;
  margin: 0 0 .5rem; max-width: 18ch; text-wrap: balance;
}
.stay-tagline {
  margin: 0 0 clamp(1.2rem, 3vw, 1.8rem); max-width: 52ch;
  font-size: clamp(1rem, .96rem + .3vw, 1.15rem); color: var(--ink-2);
}

.tag-sample {
  display: inline-block; margin-left: .5em;
  font-size: .6rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
  background: var(--paper-2); border: 1px solid var(--line);
  padding: .2rem .5rem; border-radius: 100px; vertical-align: .06em;
}

/* --- the photographs, all at the top ---

   A viewer, not a mosaic. The left is one photograph you can get inside
   of — zoom, pinch, drag — and the right is the rest of the roll, greyed
   back until one is chosen. The rail slides by whole columns, and it
   passes beneath the large frame on the way out, so the arrow reads as
   feeding new photographs in rather than as a page turn. */

.stage {
  display: grid; gap: .55rem;
  grid-template-columns: minmax(0, 1.95fr) minmax(0, 1fr);
  aspect-ratio: 2 / 1;
}
.stage[data-solo="true"] { grid-template-columns: minmax(0, 1fr); }

.stage-focus {
  position: relative; margin: 0; z-index: 2;
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--paper-3);
  box-shadow: 0 0 0 1px var(--line), 10px 0 30px -22px rgba(34,31,26,.7);
}

.focus-frame {
  position: absolute; inset: 0; overflow: hidden;
  border: 0; padding: 0; background: none;
  cursor: zoom-in; touch-action: pan-y;
}
.focus-frame[data-zoomed="true"] { cursor: grab; touch-action: none; }
.focus-frame[data-drag="true"] { cursor: grabbing; }

.focus-pane {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity .45s ease;
}
.focus-pane[data-on] { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .focus-pane { transition: none; } }

/* The frame is wider than the photographs, so a contained image leaves
   bands at the sides. A blurred copy of the same photograph fills them:
   a mount in the picture's own colours rather than a gap. */
.focus-back {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: blur(30px) saturate(1.15) brightness(.92);
  transform: scale(1.15); opacity: .55;
}
.focus-img {
  position: relative;
  width: 100%; height: 100%; object-fit: contain;
  transform-origin: 50% 50%;
  -webkit-user-select: none; user-select: none; -webkit-user-drag: none;
}

.focus-hint {
  position: absolute; left: .8rem; bottom: .8rem; z-index: 3; margin: 0;
  background: rgba(20,18,15,.55); color: rgba(255,253,248,.9);
  backdrop-filter: blur(6px); pointer-events: none;
  font: 400 .7rem/1 var(--sans); letter-spacing: .01em;
  padding: .38rem .7rem; border-radius: 100px;
  opacity: 0; transition: opacity .5s ease;
}
.stage-focus:hover .focus-hint, .focus-frame:focus-visible ~ .focus-hint { opacity: .95; }
/* Once you have zoomed, you know how. It does not come back. */
.stage-focus .focus-hint[data-gone] { opacity: 0; }

/* --- the rail ---

   The rail reaches back under the large frame by --dip, and the strip is
   inset by the same amount, so the columns sit where the grid puts them
   but the spent ones slide out beneath the photograph rather than
   stopping at a hard edge in the gutter. */

.stage { --dip: 2.4rem; }

.stage-rail {
  position: relative; overflow: hidden;
  margin-left: calc(-1 * var(--dip));
}

.rail-strip {
  list-style: none; padding: 0; height: 100%;
  margin: 0 0 0 var(--dip); width: calc(100% - var(--dip));
  display: grid; gap: .55rem;
  grid-auto-flow: column;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  grid-auto-columns: calc((100% - .55rem) / 2);
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) { .rail-strip { transition: none; } }

.thumb {
  width: 100%; height: 100%; padding: 0; border: 0; overflow: hidden;
  border-radius: var(--r); cursor: pointer; background: var(--paper-3);
  filter: grayscale(1) contrast(.9) brightness(1.06);
  opacity: .6;
  transition: filter .5s ease, opacity .5s ease,
              transform .5s cubic-bezier(.2,.7,.3,1), box-shadow .5s ease;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb:hover { filter: grayscale(.3); opacity: .92; }

/* The chosen one is the only one in colour, and it keeps its full cell:
   the ring is enough to say which photograph the frame is holding. */
.thumb[aria-pressed="true"] {
  filter: none; opacity: 1;
  box-shadow: 0 0 0 2px var(--sea), var(--shadow);
  cursor: default;
}

.rail-arw {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 2.1rem; height: 2.1rem; display: grid; place-items: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(251,247,239,.94); color: var(--ink);
  backdrop-filter: blur(6px); box-shadow: var(--shadow);
  opacity: 0; transition: opacity .25s ease, background .2s ease;
}
.rail-prev { left: .5rem; }
.rail-next { right: .5rem; }
.stage:hover .rail-arw, .rail-arw:focus-visible { opacity: 1; }
.rail-arw:hover { background: #fff; }
.rail-arw[disabled] { opacity: 0 !important; pointer-events: none; }
@media (hover: none) { .stage .rail-arw { opacity: 1; } }

/* --- the caption under the frame ---

   The foot borrows the stage's own column track so the caption is centred
   under the photograph rather than under the whole stage, rail included.
   The count of the roll sits below it, quiet, where it used to be a chip
   laid over the picture. */

.stage-foot {
  display: grid; gap: .55rem;
  grid-template-columns: minmax(0, 1.95fr) minmax(0, 1fr);
  margin: .9rem 0 0;
}
.stage[data-solo="true"] + .stage-foot { grid-template-columns: minmax(0, 1fr); }

.focus-cap {
  grid-column: 1; text-align: center; margin: 0 auto;
  max-width: 54ch; color: var(--ink-2);
  font-family: var(--serif); font-size: .98rem; line-height: 1.55;
  letter-spacing: -.008em; text-wrap: pretty;
}
.focus-count {
  grid-column: 1; grid-row: 2; justify-self: center;
  font: 500 .68rem/1 var(--sans); letter-spacing: .14em;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.focus-of { opacity: .55; margin-inline: .3em; }

/* No photographs yet: the drawn horizon fills the frame the viewer would
   have taken. */
.gallery-art {
  aspect-ratio: 2 / 1; overflow: hidden;
  border-radius: var(--r-lg); background: var(--paper-3);
}
.gallery-art svg { width: 100%; height: 100%; }
@media (max-width: 700px) { .gallery-art { aspect-ratio: 4 / 3; } }

@media (max-width: 780px) {
  .stage {
    grid-template-columns: 1fr; grid-template-rows: auto auto;
    aspect-ratio: auto;
  }
  .stage-focus { aspect-ratio: 4 / 3; }
  /* Stacked, the rail is below the frame rather than beside it: there is
     nothing to slide under. */
  .stage { --dip: 0px; }
  .stage-rail { height: 3.9rem; }
  .rail-strip {
    grid-template-rows: minmax(0, 1fr);
    grid-auto-columns: calc((100% - 1.65rem) / 4);
    /* Stacked, the strip is a real scroller the thumb can throw with a
       finger, snapping column by column. The arrows still nudge it; the
       JS reads this overflow to know which rail it is driving. */
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    transform: none !important;
    transition: none;
  }
  .rail-strip::-webkit-scrollbar { display: none; }
  .rail-strip > li { scroll-snap-align: start; }
  .focus-hint { display: none; }
  /* Stacked, there is no rail alongside to centre against. */
  .stage-foot { grid-template-columns: minmax(0, 1fr); }
  .focus-cap { font-size: .92rem; }
}

/* --- the story, with the booking card alongside --- */

.stay-grid {
  display: grid; gap: clamp(1.8rem, 5vw, 4rem);
  grid-template-columns: minmax(0, 1fr) 20rem;
  align-items: start;
  padding-block: clamp(2.4rem, 6vw, 4rem);
}
@media (max-width: 900px) { .stay-grid { grid-template-columns: 1fr; } }

.stay-heads { margin-bottom: 1.4rem; }
.stay-heads h2 {
  font-family: var(--serif); font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2rem);
  font-weight: 500; letter-spacing: -.024em; margin: 0 0 .3rem;
}
.stay-line { margin: 0; color: var(--muted); font-size: .95rem; }

.story-lede {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1rem + .8vw, 1.45rem);
  font-weight: 400; line-height: 1.5; letter-spacing: -.012em;
  margin: 0 0 1.8rem; max-width: 44ch; color: var(--ink);
}

.story-high { list-style: none; margin: 0 0 clamp(2.4rem, 6vw, 3.6rem); padding: 0; }
.story-high li {
  display: flex; align-items: flex-start; gap: .7rem;
  padding: .75rem 0; border-bottom: 1px solid var(--line);
  font-size: .95rem; color: var(--ink-2);
}
.story-high li:first-child { border-top: 1px solid var(--line); }
.high-ico {
  flex: 0 0 auto; display: inline-flex; margin-top: .1em;
  color: var(--sea-deep);
}
.high-ico svg { width: 1.1rem; height: 1.1rem; }

/* --- the booking card --- */

/* The card sits where the story puts it and scrolls away with it: a
   panel that follows you down the page is a sales counter, not a
   listing. */
.book {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow);
  padding: 1.4rem 1.4rem 1.5rem;
}

.book-facts { list-style: none; margin: 0 0 1.2rem; padding: 0; }
/* One hairline between rows — not a full box of rules doubling the card's
   own border. The first row sits clean under the card's padding and the
   last carries no rule below it. */
.book-facts li {
  display: flex; align-items: center; gap: .65rem;
  padding: .6rem 0; border-bottom: 1px solid var(--line);
  font-size: .9rem; color: var(--muted);
}
.book-facts li:last-child { border-bottom: 0; padding-bottom: 0; }
.book-facts b { color: var(--ink); font-weight: 600; }
.fact-ico { flex: 0 0 auto; display: inline-flex; color: var(--sea-deep); }
.fact-ico svg { width: 1.15rem; height: 1.15rem; }
.fact-label { margin-right: auto; }

.book-note {
  margin: 1.1rem 0 0; font-size: .8rem; color: var(--muted); line-height: 1.55;
}
.book-pending { margin: 0; font-size: .88rem; color: var(--muted); }

/* --- what is out the door --- */

/* Below the story rather than beside it, and the map itself runs edge to
   edge like the one on the front page. Only the heading and the walking
   list stay inside the column. */
.stay-around { padding-bottom: clamp(2.4rem, 6vw, 4rem); }

.around-head h2 {
  font-family: var(--serif); font-size: clamp(1.4rem, 1.15rem + 1.1vw, 2rem);
  font-weight: 500; letter-spacing: -.024em; margin: 0 0 1.1rem;
}

.around-map {
  position: relative; height: clamp(30rem, 78vh, 46rem);
  background: var(--paper-3);
  border-block: 1px solid var(--line);
}
#stay-map { position: absolute; inset: 0; }
.around-map .legend-btn { position: absolute; z-index: 2; left: 1rem; top: 1rem; }
.around-map .map-credit {
  position: absolute; z-index: 2; left: 1rem; bottom: .7rem;
  font-size: .68rem; color: var(--muted);
  background: rgba(255,253,248,.82); padding: .2rem .5rem; border-radius: 100px;
}

.around-foot { padding-top: clamp(1.4rem, 3vw, 2rem); }
.map-links { margin: 1.1rem 0 0; font-size: .86rem; color: var(--muted); }
.map-links a { margin-left: .5rem; }

/* --- others in the same town --- */

.section-others { background: var(--paper-2); border-top: 1px solid var(--line); }

.stay-missing { padding-block: clamp(4rem, 12vw, 8rem); text-align: center; }
.stay-missing h1 {
  font-family: var(--serif); font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem);
  font-weight: 500; letter-spacing: -.028em; margin: 0 0 .8rem;
}
.stay-missing .section-intro { margin-inline: auto; }


/* --- the "show on map" button that lives on each card --- */

.card-map {
  background: none; border: 0; cursor: pointer;
  font: 500 .78rem/1 var(--sans); color: var(--muted);
  text-decoration: underline; text-underline-offset: 3px;
  padding: .2rem 0; position: relative; z-index: 1;
}
.card-map:hover { color: var(--ember); }

/* The popup CTA is a link now, not a button. */
a.pop-cta { text-decoration: none; }
a.pop-cta:hover { color: var(--paper); }


/* ══════════════════════  LOCATION FINDER  ═══════════════════════════
   The page opens on this rather than on a photograph: one line of what
   the site is, then the two controls that matter, then the map. */

.finder {
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(1.8rem, 4.5vw, 3rem);
}

.finder-inner {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: clamp(1.1rem, 3vw, 1.6rem);
}

.finder h1 {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 1.15rem + 2.3vw, 2.9rem);
  font-weight: 500; line-height: 1.04; letter-spacing: -.03em;
  margin: 0 0 .45rem; max-width: 20ch; text-wrap: balance;
}
.finder-sub {
  margin: 0; max-width: 46ch; color: var(--ink-2);
  font-size: clamp(.95rem, .92rem + .2vw, 1.05rem);
}

/* One field, one bar. Everything else — guests, bedrooms, price, features
   — is a decision for the grid further down, once there is something to
   narrow. Asking for all of it before the map has drawn is a form, not a
   search. */

.seek {
  display: flex; align-items: center; gap: .5rem;
  background: var(--card); border: 1px solid var(--line);
  padding: .5rem .5rem .5rem 1.4rem; border-radius: 100px;
  box-shadow: var(--shadow); width: 100%; max-width: 48rem;
  transition: box-shadow .25s ease, border-color .25s ease;
}
.seek:focus-within {
  border-color: var(--sea); box-shadow: var(--shadow-lg);
}

.seek-ico { flex: 0 0 auto; color: var(--muted); display: grid; place-items: center; }

.seek-input {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: transparent; padding: .95rem .3rem;
  font: 500 1.1rem/1.4 var(--sans); color: var(--ink);
  text-overflow: ellipsis;
}
.seek-input::placeholder { color: #9E9385; font-weight: 400; }
.seek-input:focus { outline: none; }
/* Safari puts its own decoration on a list-bound input. */
.seek-input::-webkit-calendar-picker-indicator { display: none !important; }

.seek-gps, .seek-go {
  flex: 0 0 auto; border: 0; cursor: pointer;
  font: 600 .92rem/1 var(--sans);
  border-radius: 100px; height: 3.25rem; padding-inline: 1.35rem;
  display: inline-flex; align-items: center; gap: .45rem;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.seek-gps {
  background: transparent; color: var(--muted);
  border: 1px solid var(--line);
}
.seek-gps:hover { border-color: var(--sea); color: var(--sea-deep); }
.seek-gps[data-on="true"] {
  background: var(--sea-soft); border-color: var(--sea); color: var(--sea-deep);
}
.seek-gps[data-busy="true"] { opacity: .6; pointer-events: none; }
.seek-gps[data-busy="true"] svg { animation: spin 1.1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.seek-go { background: var(--sea-deep); color: var(--paper); }
.seek-go:hover { background: var(--ember); }

.loc-status { margin: 0; font-size: .88rem; color: var(--muted); }
.loc-status b { color: var(--ink); font-weight: 600; }

/* Narrow enough and the label on "near me" is the first thing to go, then
   the bar unwraps into a stack rather than crushing the field. */
@media (max-width: 620px) {
  .seek-gps-t { display: none; }
  .seek-gps { padding-inline: .9rem; }
}
@media (max-width: 460px) {
  .seek { flex-wrap: wrap; border-radius: var(--r-lg); padding: .75rem; }
  .seek-ico { display: none; }
  .seek-input { flex: 1 1 100%; padding-inline: .5rem; }
  .seek-gps, .seek-go { flex: 1 1 auto; justify-content: center; }
  .seek-gps-t { display: inline; }
}

.section-stays h2 {
  margin: 0 auto 1.8rem; max-width: none; text-align: center;
}

/* "You are here", once the browser has said so. */
.you {
  width: 1.05rem; height: 1.05rem; border-radius: 50%;
  background: var(--ember); border: 2.5px solid var(--card);
  box-shadow: 0 0 0 4px rgba(184,86,49,.24), var(--shadow);
}

.card-away {
  margin: 0 0 .5rem; font-size: .8rem; font-weight: 600;
  color: var(--ember); letter-spacing: .01em;
}


/* ═══════════════════════  BREADCRUMB  ═══════════════════════════════

   Drawn by B.crumbsHTML in common.js so tools/build.js and stay.js can
   write the identical markup — the trail must not shift when the script
   replaces the shell it was rendered into. */

.crumbs { margin: 0 0 1.4rem; }
.crumbs ol {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .55rem;
  list-style: none; margin: 0; padding: 0;
  font-size: .82rem; color: var(--ink-2);
}
.crumbs li { display: flex; align-items: baseline; gap: .55rem; }
.crumbs li + li::before {
  content: "/"; color: var(--paper-3); font-size: .9em;
}
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--ember); text-decoration: underline; }
.crumbs [aria-current="page"] { color: var(--ink); font-weight: 500; }


/* ═══════════════════════  TOWN HUB  ═════════════════════════════════ */

.hub-head, .prose-head {
  padding-block: clamp(2rem, 5vw, 3.4rem) clamp(1.6rem, 4vw, 2.8rem);
  border-bottom: 1px solid var(--paper-3);
}
.hub-head h1, .prose-head h1 {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.7rem);
  font-weight: 500; line-height: 1.03; letter-spacing: -.03em;
  margin: 0 0 .7rem; max-width: 18ch; text-wrap: balance;
}
.hub-lede {
  margin: 0; max-width: 52ch;
  font-size: clamp(1.02rem, .97rem + .3vw, 1.18rem);
  line-height: 1.55; color: var(--ink-2);
}
.hub-count {
  margin: 1.1rem 0 0; font-size: .8rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--gold);
}

/* The hub's prose column. Measure matters more here than anywhere else
   on the site: this is the only page anyone reads a paragraph on. */
.hub-prose { max-width: 62ch; }
.hub-prose h2 {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem);
  font-weight: 500; line-height: 1.12; letter-spacing: -.022em;
  margin: 2.6rem 0 .9rem; max-width: 22ch;
}
.hub-prose h2:first-child { margin-top: 0; }
.hub-prose p { margin: 0 0 1.1rem; line-height: 1.68; color: var(--ink-2); }
.hub-about { background: var(--paper-2); }

.prose-list { margin: 0 0 1.4rem; padding-left: 1.1rem; color: var(--ink-2); }
.prose-list li { margin-bottom: .55rem; line-height: 1.6; }

/* The directory's legal footing, set quieter than the argument around it. */
.hub-prose .fine-print {
  font-size: .86rem; color: var(--muted); line-height: 1.6;
  border-left: 2px solid var(--line); padding-left: 1rem;
}

.hub-more { margin: 1.8rem 0 0; font-weight: 500; }
.others-all { margin: 1.8rem 0 0; font-weight: 500; }


/* The questions the premise raises. A <dl> because that is what it is. */
.faq { margin: 0; }
.faq dt {
  font-family: var(--serif); font-size: 1.14rem; font-weight: 600;
  color: var(--ink); margin: 1.7rem 0 .5rem; letter-spacing: -.012em;
}
.faq dt:first-child { margin-top: 0; }
.faq dd {
  margin: 0; padding: 0 0 0 .95rem;
  border-left: 2px solid var(--sea-soft);
  color: var(--ink-2); line-height: 1.68;
}


/* ═══════════════════  WHERE WE LIST  ════════════════════════════════

   The index's crawl path to every town hub, and the only one that is in
   the HTML — the finder's datalist is built by script and leads nowhere
   a crawler can follow. */

.section-towns { background: var(--paper-2); }
.town-links {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.town-links a {
  display: flex; flex-direction: column; gap: .3rem;
  padding: 1.15rem 1.3rem;
  background: var(--card); border: 1px solid var(--paper-3);
  border-radius: var(--r); text-decoration: none; color: var(--ink);
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.town-links a:hover {
  transform: translateY(-2px); border-color: var(--sea);
  box-shadow: var(--shadow-lg);
}
.town-links b {
  font-family: var(--serif); font-size: 1.22rem; font-weight: 500;
  letter-spacing: -.02em;
}
.town-links span { font-size: .82rem; color: var(--ink-2); }


/* ═══════════════════  PRERENDERED LISTING  ══════════════════════════

   What tools/build.js writes into a listing page before stay.js replaces
   it. Only a reader without JavaScript ever sees these rules, so they
   aim at legibility, not at matching the viewer they stand in for. */

.stay-shots {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}
.stay-shots li:first-child { grid-column: 1 / -1; }
.stay-shots figure { margin: 0; }
.stay-shots img {
  width: 100%; height: auto; display: block;
  border-radius: var(--r); background: var(--paper-2);
}
.stay-shots figcaption {
  margin-top: .5rem; font-size: .82rem; color: var(--ink-2);
}

.walks-static { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.walks-static li {
  display: grid; gap: .2rem;
  padding: .9rem 1.1rem;
  background: var(--card); border: 1px solid var(--paper-3);
  border-radius: var(--r);
}
.walks-static b { font-size: 1rem; }
.walks-static .walk-time {
  font-size: .8rem; font-weight: 600; color: var(--sea-deep);
}
.walks-static .walk-blurb { font-size: .87rem; color: var(--ink-2); line-height: 1.5; }

.stay-art { border-radius: var(--r-lg); overflow: hidden; }
.stay-art svg { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; }


/* ═══════════════════════  FOOTER COLUMNS  ═══════════════════════════

   Every town hub linked from every page. This is what stops a hub from
   depending on the index alone for its standing. */

.footer-cols { display: flex; flex-wrap: wrap; gap: 1.6rem 3rem; }
.footer-col h2 {
  font-family: var(--sans); font-size: .72rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(247,242,233,.5); margin: 0 0 .7rem;
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: .4rem; font-size: .86rem; }

@media (max-width: 900px) {
  .footer-brand { text-align: left; margin-left: 0; }
}