/* ============================================================
   02 La Barberia desde 1966 - Sant Andreu, Barcelona
   The design lives here. ds.css, booking.css and media.css load
   AFTER this file and refine it; nothing below fights them.

   READ: heritage local-business landing for Sant Andreu neighbours
   and curious visitors, with a documentary language, leaning toward
   archival typography and restrained motion.

   The page is printed matter, not luxury branding. Paper ground,
   ink text, one brick accent that stands in for the barber pole
   without anybody painting a barber pole. Square corners, hairline
   rules, a ledger for the price list, and the shop's own
   photographs carrying the room.
   ============================================================ */

:root {
  /* ---- Palette (DESIGN-DIRECTIONS, section 02) ----------------
     Measured, not estimated:
       ink on paper          13.55:1
       brick on paper         5.37:1  (safe for small running text)
       paper-white on brick   6.14:1  (CTA label on the button fill)
       olive muted on paper   5.46:1
       line on paper          3.59:1  (component boundaries)        */
  --bg:        #EDEAE3;   /* paper */
  --bg-2:      #E4E0D6;   /* a deeper sheet, for the price ledger */
  --bg-3:      #F5F3ED;   /* form fields, the lightest sheet */
  --text:      #1F2119;   /* ink */
  --muted:     #5C5F4E;   /* olive grey */
  --accent:    #A63A24;   /* brick */
  --accent-ink:#FBF9F5;   /* label on the brick fill, never pure white */
  --accent-deep:#8A2F1D;
  --line:      #7E7A67;   /* functional boundary: inputs, cards */
  --rule:      #CFC9BA;   /* decorative hairline */

  --font-display: "EB Garamond", "Iowan Old Style", Palatino, Georgia, serif;
  --font-body: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;

  /* One corner-radius system, chosen and held: this is printed
     matter, so it is square. 2px on inputs only, because a hard 0
     on a native control reads as a rendering fault. */
  --r: 0px;
  --r-sm: 2px;

  --nav-h: 60px;
  --maxw: 1180px;
  --pad: clamp(1.25rem, 4vw, 3rem);
  --ease: cubic-bezier(0.22, 0.75, 0.3, 1);

  /* Dials for ds.css. Slow settle, small lift: this shop is not in
     a hurry and the interface should not suggest it is. */
  --ds-lift: 2px;
  --ds-dur: 0.3s;
}

/* Error text. booking.css flips --bad to a light salmon under
   prefers-color-scheme: dark, which on this permanently light paper
   ground measures 1.66:1 and is unreadable. This page has one theme
   regardless of the system setting, so it pins its own value at
   5.44:1. Higher specificity than :root, so it wins over the media
   query in booking.css no matter which file loads last. */
html:root { --bad: #b3261e; }

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

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 500; line-height: 1.08; letter-spacing: -0.005em; }
p { margin: 0; }
ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
li { list-style: none; }
address { font-style: normal; }
img, svg { max-width: 100%; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--accent-deep); }

.ico { width: 1.05em; height: 1.05em; flex: none; vertical-align: -0.15em; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--pad);
}

.skip {
  position: absolute;
  left: 0.5rem;
  top: -5rem;
  z-index: 200;
  padding: 0.85rem 1.1rem;
  min-height: 44px;
  background: var(--accent);
  color: var(--accent-ink);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { top: 0.5rem; color: var(--accent-ink); }

/* ---- Reveal -------------------------------------------------
   The floor under motion.js. If Motion never loads this still
   reveals; if scripting is off entirely the noscript block in each
   page overrides it. Slow and small on purpose. */
.rv {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.75s var(--ease), transform 0.75s var(--ease);
}
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   Header
   ============================================================ */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  min-height: var(--nav-h);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .nav { background: #EDEAE3; }
}

.nav-in {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  /* The 1px bottom border on .nav is part of --nav-h, so the inner row asks
     for one pixel less. Otherwise the header is 61px, the hero is sized
     against 60px, and the two together are a pixel taller than the viewport. */
  min-height: calc(var(--nav-h) - 1px);
  padding-inline: var(--pad);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.brand {
  display: block;
  margin-right: auto;
  text-decoration: none;
  color: var(--text);
  line-height: 1.05;
}
.brand-name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 600;
}
.brand-year {
  display: block;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.langs { display: flex; gap: 8px; }
.langs a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.langs a:hover { color: var(--text); }
.langs a[aria-current="true"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.nav-tel,
.nav-cta { display: none; }

@media (min-width: 880px) {
  :root { --nav-h: 68px; }
  .nav-tel {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 44px;
    padding-inline: 0.5rem;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    font-variant-numeric: tabular-nums;
  }
  .nav-tel:hover { color: var(--accent); }
  .nav-cta {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 1.1rem;
    background: var(--accent);
    color: var(--accent-ink);
    border: 1px solid var(--accent);
    border-radius: var(--r);
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-decoration: none;
  }
  .nav-cta:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--accent-ink); }
}

/* ============================================================
   Buttons
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.75rem 1.4rem;
  border-radius: var(--r);
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--accent-ink); }
.btn-ghost {
  background: transparent;
  border-color: var(--line);
  color: var(--text);
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn:disabled { opacity: 0.6; cursor: default; }

.tel-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.tel-link:not([href]) { color: var(--text); text-decoration: none; }

/* ============================================================
   Section furniture
   ============================================================ */

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

.eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.9rem;
}

.sec-head { max-width: 46rem; margin-bottom: clamp(2rem, 4vw, 3.25rem); }
.sec-head h2 { font-size: clamp(1.9rem, 1.4rem + 2vw, 3.1rem); }
.sec-lede {
  margin-top: 0.9rem;
  max-width: 40rem;
  color: var(--muted);
  font-size: 1.02rem;
}

/* ============================================================
   Hero - asymmetric split, headline beside the storefront.
   Measured at 390x844: the headline runs to two lines and the whole
   hero sits inside one viewport with the booking CTA above the fold.
   ============================================================ */

.hero {
  min-height: calc(100dvh - var(--nav-h));
  display: flex;
  padding-block: 0;
}
.hero-in {
  flex: 1;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(1.25rem, 3.5vw, 2.25rem) var(--pad) clamp(1.25rem, 3.5vw, 2.25rem);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: clamp(1.1rem, 3vw, 2rem);
  min-height: 0;
}

/* Measured, not guessed: at 390px this is 41px and the headline breaks over
   two lines with the longest at 267px inside a 350px column. The 3.6rem cap
   keeps it to two lines at 900px too, where the text column is narrowest
   relative to the type size. */
.hero h1 {
  font-size: clamp(2.6rem, 1.6rem + 4vw, 3.6rem);
  line-height: 1.04;
}
.hero-sub {
  margin-top: clamp(0.85rem, 2vw, 1.25rem);
  max-width: 32rem;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.12rem);
  color: var(--muted);
}
.hero-cta {
  margin-top: clamp(1.25rem, 3vw, 2rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
}
.hero-cta .btn { flex: 0 1 auto; min-width: 11rem; }

.hero-media {
  min-height: 150px;
  height: 100%;
  border: 1px solid var(--rule);
}
/* The narrow phone crop of a 16:9 storefront shows about 44% of the frame.
   55% across keeps both the fascia sign and the barber pole inside it. */
.hero-media img { object-position: 55% 42%; }

@media (min-width: 900px) {
  .hero-in {
    grid-template-rows: none;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: center;
    gap: clamp(2rem, 5vw, 4rem);
  }
  /* The photograph runs the full height of the hero rather than floating as a
     small panel in the middle of it. At 1280 that is a 591x680 box out of a
     1600x900 frame, which at 55% across keeps the fascia sign and the barber
     pole both inside the crop. */
  .hero-media { align-self: stretch; height: auto; min-height: 0; }
}

/* ============================================================
   Story - text with a facts rail beside the room itself
   ============================================================ */

.story { background: var(--bg); }
.story-in { display: grid; gap: clamp(1.75rem, 4vw, 3rem); }
@media (min-width: 880px) {
  .story-in {
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    align-items: center;
    gap: clamp(2.5rem, 5vw, 4.5rem);
  }
}

.story-copy h2 { font-size: clamp(1.9rem, 1.4rem + 2vw, 3.1rem); }
.story-lede {
  margin-top: clamp(1.1rem, 2.5vw, 1.6rem);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  line-height: 1.5;
  max-width: 32rem;
}
.story-body {
  margin-top: 1.1rem;
  max-width: 32rem;
  color: var(--muted);
}

.facts {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  border-top: 1px solid var(--rule);
}
.facts > div {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule);
}
.facts dt {
  flex: 0 0 auto;
  min-width: 9.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.facts dd {
  flex: 1 1 12rem;
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.story-media { border: 1px solid var(--rule); }
figcaption.m-cap { font-size: 0.8rem; }

/* ============================================================
   Prices - a grouped ledger on a deeper sheet.
   Not eight rows with a hairline under each: three named groups,
   a rule only between groups, the price set in the display face.
   ============================================================ */

.prices { background: var(--bg-2); }

.price-group { display: grid; gap: clamp(1rem, 2.5vw, 1.5rem); }
.price-group + .price-group {
  margin-top: clamp(2rem, 4.5vw, 3.25rem);
  padding-top: clamp(2rem, 4.5vw, 3.25rem);
  border-top: 1px solid var(--line);
}
@media (min-width: 820px) {
  .price-group {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
  }
}

.pg-title { font-size: clamp(1.4rem, 1.2rem + 0.9vw, 2rem); font-weight: 500; }
.pg-title::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin-top: 0.7rem;
  background: var(--accent);
}

/* Capped measure: right-aligning the price against the full 800px column at
   1280 makes the eye travel too far between the service and its price. */
.price-list { display: grid; gap: clamp(1rem, 2.2vw, 1.45rem); max-width: 38rem; }
.price-list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.35rem 1.25rem;
}
.pl-name {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.42rem);
  font-weight: 500;
  line-height: 1.25;
  min-width: 0;
}
.pl-name small,
.pl-name .pl-min {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--muted);
}
.pl-name small { font-size: 0.85rem; margin-top: 0.25rem; line-height: 1.55; }
.pl-name .pl-min {
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-top: 0.3rem;
}
.pl-eur {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.05rem + 0.55vw, 1.55rem);
  font-weight: 600;
  color: var(--accent);
  white-space: nowrap;
}

.price-foot {
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  color: var(--muted);
  font-size: 0.95rem;
  max-width: 42rem;
}

/* ============================================================
   Visits - the one thing on this page nobody else offers, so it
   gets a whole band of type rather than a bullet in a list.
   ============================================================ */

.visits { background: var(--bg); }
.visits-in { max-width: 56rem; }
.visits h2 { font-size: clamp(2rem, 1.35rem + 2.7vw, 3.6rem); line-height: 1.05; }
.visits-lede {
  margin-top: clamp(1.1rem, 2.5vw, 1.5rem);
  max-width: 38rem;
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.08rem + 0.6vw, 1.5rem);
  line-height: 1.5;
}
.visits-body { margin-top: 1rem; max-width: 36rem; color: var(--muted); }
.visits-call {
  margin-top: clamp(1.4rem, 3vw, 2rem);
  padding-top: clamp(1.25rem, 3vw, 1.75rem);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.25rem;
}
.visits-call .cap {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ============================================================
   Gallery - the shop's own photographs at their own proportions.
   Columns rather than a cropped grid, so no photograph is trimmed
   to fit a box it was never shot for.
   ============================================================ */

.shots { background: var(--bg-2); }
.gallery {
  columns: 1;
  column-gap: clamp(0.6rem, 1.6vw, 1rem);
}
@media (min-width: 620px) { .gallery { columns: 2; } }
@media (min-width: 1000px) { .gallery { columns: 3; } }
.gallery figure {
  break-inside: avoid;
  margin: 0 0 clamp(0.6rem, 1.6vw, 1rem);
  border: 1px solid var(--rule);
}
.shots-note {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  font-size: 0.88rem;
  color: var(--muted);
  max-width: 42rem;
}

/* ============================================================
   Reviews - real Google reviews, quoted as written and left in the
   language they were written in. Long ones get a wider measure so
   nothing runs past three or four lines.
   ============================================================ */

.says { background: var(--bg); }
.rating {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.9rem;
  margin-top: 1rem;
}
.rating b {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem);
  font-weight: 600;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.rating span { color: var(--muted); font-size: 0.98rem; }

.reviews { display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); }
@media (min-width: 900px) {
  .reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .reviews .q-wide { grid-column: span 2; }
}
.reviews figure {
  min-width: 0;
  padding-top: 1.1rem;
  border-top: 2px solid var(--accent);
}
.reviews blockquote p {
  font-family: var(--font-display);
  font-size: clamp(1.08rem, 1rem + 0.35vw, 1.28rem);
  line-height: 1.5;
}
/* No text-transform here on purpose. These are the names people posted the
   reviews under, and one of them is "iNnFeR". Uppercasing it would be quietly
   rewriting somebody's name. */
.reviews figcaption {
  margin-top: 0.9rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--muted);
}
.says-note {
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
  font-size: 0.88rem;
  color: var(--muted);
  max-width: 42rem;
}

/* ============================================================
   Practical - hours, address, amenities
   ============================================================ */

.info { background: var(--bg-2); }
.info-grid { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
@media (min-width: 880px) {
  .info-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
  .card-hours { grid-column: span 5; }
  .card-where { grid-column: span 7; }
  .perks { grid-column: 1 / -1; }
}

.card {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--accent);
  border-radius: var(--r);
  padding: clamp(1.4rem, 3vw, 2.1rem);
  min-width: 0;
}
.card h2 { font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem); margin-bottom: 1.1rem; }

.hours-grid { display: grid; gap: 0; }
.hours-grid > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.2rem 1rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--rule);
}
.hours-grid > div:last-child { border-bottom: 0; padding-bottom: 0; }
.hours-grid dt { font-weight: 600; }
.hours-grid dd {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  line-height: 1.55;
}
.hours-grid .shut { color: var(--accent); font-weight: 600; }
.hours-note { margin-top: 1.1rem; font-size: 0.9rem; color: var(--muted); }

.card-where address {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem);
  line-height: 1.45;
}
.contact-list { margin-top: 1.3rem; display: grid; gap: 0.2rem; }
.contact-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.9rem;
  padding: 0.3rem 0;
  border-top: 1px solid var(--rule);
}
.contact-list li:first-child { border-top: 0; }
.contact-list .k {
  flex: 0 0 auto;
  min-width: 7.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-list a,
.contact-list span.v {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  font-weight: 600;
  min-width: 0;
  overflow-wrap: anywhere;
}
.contact-list a { color: var(--accent); }
.contact-list a:not([href]) { color: var(--text); text-decoration: none; cursor: default; }
.contact-list span.v { color: var(--muted); font-weight: 500; }

.perks {
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  border-top: 1px solid var(--line);
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
}
@media (min-width: 760px) { .perks { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.perks li { min-width: 0; }
.perks li::before {
  content: "";
  display: block;
  width: 26px;
  height: 2px;
  background: var(--accent);
  margin-bottom: 0.7rem;
}
.perks b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 0.2rem;
}
.perks span { font-size: 0.92rem; color: var(--muted); line-height: 1.6; }

/* ============================================================
   Booking
   ============================================================ */

.book { background: var(--bg); }
.book-in { display: grid; gap: clamp(2rem, 4vw, 3.25rem); align-items: start; }
@media (min-width: 980px) {
  .book-in { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(2.5rem, 5vw, 4.5rem); }
}
.book-col { min-width: 0; }

.book-copy h2 { font-size: clamp(1.9rem, 1.4rem + 2vw, 3.1rem); }
.book-copy p { margin-top: 1.1rem; max-width: 32rem; color: var(--muted); }
.book-copy .strong { color: var(--text); font-weight: 600; }

.form {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: clamp(1.25rem, 3vw, 2rem);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.9rem, 2vw, 1.2rem);
}
.form[hidden] { display: none; }
@media (max-width: 600px) { .form { grid-template-columns: minmax(0, 1fr); } }

.field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.field.full { grid-column: 1 / -1; }
.field label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}
.field input,
.field select {
  font: inherit;
  font-size: 1rem;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  padding: 0.6rem 0.75rem;
  background: var(--bg-3);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.field .hint { font-size: 0.82rem; color: var(--muted); line-height: 1.5; }
.field .field-msg { font-weight: 600; }

/* Status is never colour alone: the error gains a bar and weight,
   the acknowledgement a lighter bar and a tinted sheet. */
.form-error,
.form-ok {
  grid-column: 1 / -1;
  display: none;
  margin: 0;
  padding: 0.75rem 0.9rem;
  border-left: 4px solid var(--line);
  font-size: 0.96rem;
  line-height: 1.6;
}
.form-error.show,
.form-ok.show { display: block; }
.form-error {
  border-left-color: var(--bad);
  color: var(--bad);
  font-weight: 600;
}
.form-error a { color: var(--bad); font-weight: 700; }
.form-ok { background: var(--bg-3); color: var(--text); }

.book-result { margin-top: clamp(1rem, 2vw, 1.5rem); border-radius: var(--r); }
.book-result[hidden] { display: none; }

/* booking.css gives this note an 8px radius, which would be the only
   rounded corner on the site. Two classes beat its one. */
.form .wa-pending-note { border-radius: var(--r); background: var(--bg-3); }

/* ============================================================
   Footer
   ============================================================ */

.foot {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.foot-in { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (min-width: 820px) {
  .foot-in { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); }
}
.foot h2 { font-size: 1.35rem; margin-bottom: 0.6rem; }
.foot p, .foot li, .foot address { font-size: 0.94rem; color: var(--muted); line-height: 1.7; }
.foot h3 {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.6rem;
}
.foot-links { display: grid; gap: 0.1rem; }
.foot-links a,
.foot-links span.v {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  font-size: 0.94rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.foot-links a { color: var(--accent); }
.foot-links a:not([href]) { color: var(--text); text-decoration: none; cursor: default; }
.foot-links span.v { color: var(--muted); font-weight: 500; }

.foot-note {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: clamp(1.25rem, 3vw, 1.75rem);
  border-top: 1px solid var(--rule);
  font-size: 0.84rem;
  color: var(--muted);
  max-width: 62rem;
  line-height: 1.7;
}

/* ============================================================
   Narrow-screen collapses, declared rather than assumed.
   Checked at 360px and 390px: nothing scrolls sideways.
   ============================================================ */

@media (max-width: 420px) {
  .nav-in { gap: 0.4rem; }
  .brand-name { font-size: 1rem; }
  .hero-cta .btn { flex: 1 1 100%; min-width: 0; }
  .facts dt { min-width: 100%; }
  .contact-list .k { min-width: 100%; }
  .rating b { font-size: 2rem; }
}