/* ===================================================================
   GOAT HOTEL — STYLESHEET
   Brand: the GOAT family plum + amber palette and Fraunces + Inter type.
   Colour, type, radius and shadow live in css/tokens.css (a copy of
   brand/tokens.css). Nothing brand-related is defined in this file.
   Structure:
   1. CSS Variables & Reset
   2. Base / Typography
   3. Layout Helpers
   4. Buttons
   5. Header / Navigation
   6. Hero
   7. Placeholder Images
   8. Welcome Section
   9. Why Stay (Feature Grid)
   10. Rooms
   11. Breakfast (Split Layout)
   12. Discover Llandudno (Destinations)
   13. Gallery (Masonry)
   14. Reviews
   15. Contact / Form
   16. Location
   17. Footer
   18. Back to Top
   19. Scroll Reveal Animation
   20. Responsive Breakpoints
   =================================================================== */

/* ---------------------------------
   1. CSS VARIABLES & RESET
--------------------------------- */
:root {
  /* Colour, type, radius and shadow all come from the family token file,
     brand/tokens.css, copied in by `node brand/sync.js`. Do not redefine
     them here and do not hard-code a colour anywhere in this file. */

  /* Spacing and layout are site-local: GOAT Hotel has its own rhythm. */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-xxl: 6rem;
  --container-width: 1160px;
  --header-height: 76px;

  /* Motion follows the family duration, so reduced-motion works everywhere. */
  --transition: var(--duration) var(--ease);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-height);
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);   /* 18px — brand floor for body text */
  color: var(--colour-text);
  background-color: var(--colour-bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

input,
textarea {
  font-family: inherit;
  font-size: 1rem;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Skip link for keyboard users */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-sm);
  background: var(--colour-ink);
  color: var(--colour-surface);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  z-index: 1000;
  transition: top var(--transition);
}

.skip-link:focus {
  top: var(--space-sm);
}

/* Visible focus outline for keyboard navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--colour-accent);
  outline-offset: 2px;
}

/* ---------------------------------
   2. BASE / TYPOGRAPHY
--------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--colour-ink);
}

h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 700; }
h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); }
h3 { font-size: 1.25rem; }

p { color: var(--colour-muted); }

.eyebrow {
  font-family: var(--font-body);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--colour-accent-text);
  margin-bottom: var(--space-xs);
}

/* ---------------------------------
   3. LAYOUT HELPERS
--------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.section {
  padding: var(--space-xxl) 0;
}

.section-tinted {
  background-color: var(--colour-surface-2);
}

.section-heading {
  max-width: 640px;
  margin: 0 auto var(--space-xl);
  text-align: center;
}

.section-intro {
  margin-top: var(--space-sm);
}

.section-cta {
  text-align: center;
  margin-top: var(--space-xl);
}

.section-cta p {
  margin-bottom: var(--space-sm);
}

.section-cta p a {
  color: var(--colour-accent-text);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.split-content .eyebrow {
  display: block;
}

.split-content h2 {
  margin-bottom: var(--space-sm);
}

.split-content p {
  margin-bottom: var(--space-md);
}

.checklist li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: 0.6rem;
  color: var(--colour-ink);
}

.checklist li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--colour-accent-text);
  font-weight: 700;
}

/* ---------------------------------
   4. BUTTONS
--------------------------------- */
.btn {
  display: inline-block;
  white-space: nowrap;
  padding: 0.9rem 2rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  transition: transform var(--transition), box-shadow var(--transition), background-color var(--transition), color var(--transition);
  border: 2px solid transparent;
}

.btn-primary {
  background-color: var(--colour-accent);
  color: var(--colour-ink);
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background-color: var(--colour-accent-hover);
  color: var(--colour-ink);
  transform: translateY(-2px);
  box-shadow: var(--shadow-raised);
}

.btn-secondary {
  background-color: transparent;
  border-color: var(--colour-surface);
  color: var(--colour-surface);
}

/* The outline button for light backgrounds; .btn-secondary is for the hero. */
.btn-outline {
  background-color: transparent;
  border-color: var(--colour-ink);
  color: var(--colour-ink);
}

.btn-outline:hover,
.btn-outline:focus-visible {
  background-color: var(--colour-ink);
  color: var(--colour-surface);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  background-color: var(--colour-surface);
  color: var(--colour-ink);
  transform: translateY(-2px);
}

/* ---------------------------------
   5. HEADER / NAVIGATION
--------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  border-bottom: 1px solid var(--colour-line);
  transition: box-shadow var(--transition);
}

/* The tinted, blurred pane behind the header sits on a pseudo-element rather
   than on .site-header itself. backdrop-filter makes whatever carries it a
   containing block for fixed-position descendants, and the mobile nav drawer
   is one: on .site-header it stopped the closed drawer being fixed to the
   viewport, so its off-screen translate counted towards the page width and
   the whole page scrolled sideways on a phone. Moving the effect down one
   level leaves the drawer genuinely viewport-fixed, which adds nothing to the
   scrollable area. Same appearance, no overflow. */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: rgba(246, 243, 238, 0.96);
  backdrop-filter: blur(6px);
}

.site-header.is-scrolled {
  box-shadow: var(--shadow-card);
}

/* Home page only (James, 2026-10-02): the bar sits over the hero photo,
   clear, and turns into the usual stone bar once the page moves, as on
   GOAT Parties and Paul Elsey. script.js adds .is-scrolled, and .is-open
   while the phone menu is out. The .js class comes from a one-line script
   in the <head> of index.html, so with JavaScript off none of this applies
   and the bar is the usual solid one, in the flow of the page.

   Everything "clear" is scoped to :not(.is-scrolled):not(.is-open), so the
   solid bar is exactly the bar every other page has. */
.js .site-header--overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transition: box-shadow var(--transition), border-color var(--transition);
}

.js .site-header--overlay::before {
  transition: opacity var(--transition);
}

/* While clear, a plum shade behind the bar keeps the white menu readable
   where the photo is bright sky. It fades out as the stone bar fades in. */
.js .site-header--overlay::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--header-height) + 2.5rem);
  z-index: -1;
  background: linear-gradient(rgba(36, 17, 58, 0.66) 0%, rgba(36, 17, 58, 0.5) 60%, rgba(36, 17, 58, 0) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}

.js .site-header--overlay:not(.is-scrolled):not(.is-open) {
  border-bottom-color: transparent;
}

.js .site-header--overlay:not(.is-scrolled):not(.is-open)::before {
  opacity: 0;
}

.js .site-header--overlay:not(.is-scrolled):not(.is-open)::after {
  opacity: 1;
}

.js .site-header--overlay .logo,
.js .site-header--overlay .nav-link {
  transition: color var(--transition);
}

.js .site-header--overlay:not(.is-scrolled):not(.is-open) .logo {
  color: var(--colour-surface);
}

.js .site-header--overlay:not(.is-scrolled):not(.is-open) .nav-toggle-bar {
  background-color: var(--colour-surface);
}

.js .site-header--overlay:not(.is-scrolled):not(.is-open) :focus-visible {
  outline-color: var(--colour-surface);
}

/* The links are only in the bar from 1200px up. Below that they are in the
   drawer, which keeps its own colours. */
@media (min-width: 1200px) {
  .js .site-header--overlay:not(.is-scrolled):not(.is-open) .nav-link,
  .js .site-header--overlay:not(.is-scrolled):not(.is-open) .nav-link.is-active {
    color: var(--colour-surface);
  }
}

/* The bar sits over the photo here, so the hero is the whole screen and its
   words start below the bar. See the note on .hero for vh and svh. */
.js .site-header--overlay ~ main .hero {
  min-height: 100vh;
  min-height: 100svh;
  padding-top: var(--header-height);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  height: var(--header-height);
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--colour-ink);
  /* Fraunces is wider than the Zilla Slab this replaced, so the wordmark no
     longer fits the space the flex row used to give it and would wrap to two
     lines. Hold it on one line and stop the row squeezing it. */
  flex-shrink: 0;
  white-space: nowrap;
}

/* The goat logo is a square badge with its own dark outline, so it only
   needs sizing and a matching corner radius, no background of its own. */
.logo-mark {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  object-fit: contain;
  flex-shrink: 0;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
}

.nav-toggle-bar {
  width: 24px;
  height: 2px;
  background-color: var(--colour-ink);
  transition: transform var(--transition), opacity var(--transition);
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.primary-nav ul {
  display: flex;
  gap: var(--space-md);
}

.nav-link {
  position: relative;
  font-weight: 700;
  font-size: 0.9rem;
  white-space: nowrap;
  padding: 0.4rem 0.1rem;
  color: var(--colour-ink);
}

.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background-color: var(--colour-accent);
  transition: width var(--transition);
}

.nav-link:hover::after,
.nav-link.is-active::after,
.nav-link[aria-current="page"]::after {
  width: 100%;
}

/* aria-current marks a separate page (What's On); is-active is the
   scroll-spy on the home page, which would clear a class on other pages. */
.nav-link.is-active,
.nav-link[aria-current="page"] {
  color: var(--colour-accent-text);
}

/* ---------------------------------
   6. HERO
--------------------------------- */
/* The hero photo fills the screen (James, 2026-10-02; the standard is in
   docs/PROJECT_BRIEF.md §3c). svh is the screen with a phone's address
   bar showing, so the photo does not resize when the bar slides away; vh is
   for browsers without svh. It is a minimum: on a short screen, or with
   large text, the hero grows and nothing is cut off.

   This rule is for the solid bar, which takes up room above the hero (no
   JavaScript), so the bar and the hero fill the screen between them. With
   the clear bar the hero is the full screen: .site-header--overlay above. */
.hero {
  position: relative;
  min-height: calc(100vh - var(--header-height));
  min-height: calc(100svh - var(--header-height));
  display: flex;
  align-items: flex-end;
  color: var(--colour-surface);
  overflow: hidden;
}

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

.hero-content {
  position: relative;
  z-index: 2;
  padding-bottom: var(--space-xxl);
  max-width: 760px;
}

.hero .eyebrow {
  color: var(--colour-accent-light);
}

.hero h1 {
  color: var(--colour-surface);
  margin-bottom: var(--space-sm);
}

/* The old name sits inside the h1 on its own line, the same size, while
   guests still know the hotel as Adcote House. */
.hero-formerly {
  display: block;
}

.hero-tagline {
  color: var(--colour-bg);
  font-size: 1.15rem;
  max-width: 560px;
  margin-bottom: var(--space-lg);
}

.hero-actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

/* ---------------------------------
   7. PLACEHOLDER IMAGES
--------------------------------- */
.placeholder-image {
  position: relative;
  background: linear-gradient(135deg, var(--colour-ink-light), var(--colour-ink));
  overflow: hidden;
  border-radius: var(--radius-md);
}

.placeholder-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.04) 0, rgba(255, 255, 255, 0.04) 2px, transparent 2px, transparent 14px);
}

.placeholder-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background-color: rgba(59, 31, 92, 0.55);
  padding: var(--space-sm);
}

.placeholder-text {
  color: var(--colour-surface);
  font-weight: 700;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
  text-transform: uppercase;
}

.placeholder-subtext {
  color: var(--colour-accent-light);
  font-size: var(--text-xs);   /* 14px floor */
  margin-top: 0.35rem;
}

.hero-media { border-radius: 0; }

/* Real photo containers reuse the same sizing rules as their placeholder
   equivalents, but hold an actual <img> instead of a CSS placeholder. */
.photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-media.photo,
.hero-media.photo img {
  border-radius: 0;
}

/* .photo sets position:relative for every other use of this class, but the
   hero image specifically needs to stay position:absolute (set by
   .hero-media) so it fills the whole hero section — restate it here with
   the two-class selector so it reliably wins the cascade. */
.hero-media.photo {
  position: absolute;
  inset: 0;
}

/* Dark scrim so the white hero heading/text stays readable over a bright
   real photo (rather than the flat navy gradient a placeholder had). */
.hero-media.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(59, 31, 92, 0.55) 0%, rgba(59, 31, 92, 0.45) 40%, rgba(59, 31, 92, 0.88) 100%);
}

/* Small badge shown on stock/illustrative photography that is not of the
   real GOAT Hotel property, per the site owner's request to be transparent
   about this until real photography is available. Centred over the photo. */
.photo-tag {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - (var(--space-sm) * 2));
  max-width: 260px;
  background-color: rgba(59, 31, 92, 0.82);
  color: var(--colour-bg);
  padding: 0.65rem 0.9rem;
  border-radius: var(--radius-sm);
  line-height: 1.35;
  text-align: center;
}

.photo-tag-main {
  display: block;
  font-size: var(--text-xs);   /* 14px floor */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--colour-accent-light);
}

.photo-tag-sub {
  display: block;
  font-size: var(--text-xs);   /* 14px floor */
  color: var(--colour-bg);
}

/* Small attribution caption for real, freely-licensed location photography
   (e.g. Geograph / Wikimedia Commons contributors, credited under CC BY-SA). */
.photo-credit {
  margin-top: 0.4rem;
  /* Was 0.72rem in --colour-muted-light: 11.5px at 2.4:1, which fails AA and
     sits under the 14px floor. Attribution still has to be readable. */
  font-size: var(--text-xs);
  color: var(--colour-muted);
  text-align: right;
}

.photo-credit a {
  color: inherit;
  text-decoration: underline;
}

.room-image {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.destination-image {
  aspect-ratio: 4 / 3;
  margin-bottom: var(--space-sm);
}

.split-image {
  aspect-ratio: 1 / 1;
  min-height: 320px;
}

.map-placeholder {
  aspect-ratio: 16 / 10;
}

.map-embed {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.map-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Booking and directions: linked, not embedded. */
.booking-card,
.directions-card {
  padding: var(--space-lg);
  background-color: var(--colour-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.booking-card {
  max-width: 44rem;
  margin: 0 auto;
  text-align: center;
}

.booking-card__lead {
  margin-bottom: var(--space-md);
}

.booking-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.booking-card__actions .btn {
  white-space: normal;   /* long labels wrap on a phone rather than overflow */
  text-align: center;
}

.directions-card {
  align-self: start;
}

.booking-card .booking-card__actions {
  justify-content: center;
}

.directions-card h3 {
  margin-bottom: var(--space-sm);
}

.directions-card__address {
  margin-bottom: var(--space-md);
  font-size: var(--text-md);
  line-height: 1.5;
}

.booking-embed {
  width: 100%;
  height: 1100px;
  max-height: 80vh;
  border: 1px solid var(--colour-line);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.booking-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.booking-fallback {
  text-align: center;
  margin-top: var(--space-md);
  font-size: 0.9rem;
}

/* ---------------------------------
   8. WELCOME SECTION
--------------------------------- */
.welcome-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-xl);
  align-items: start;
}

.welcome-text p {
  margin-bottom: var(--space-md);
}

.benefit-list {
  display: grid;
  gap: var(--space-md);
}

.benefit-list li {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  background-color: var(--colour-surface);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.benefit-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--colour-surface-2);
  color: var(--colour-accent-text);
  font-size: 1.2rem;
}

.benefit-list h3 {
  font-size: 1.05rem;
  margin-bottom: 0.2rem;
}

.benefit-list p {
  font-size: 0.92rem;
}

/* ---------------------------------
   9. WHY STAY (FEATURE GRID)
--------------------------------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

.feature-card {
  background-color: var(--colour-surface);
  padding: var(--space-lg) var(--space-md);
  border-radius: var(--radius-md);
  text-align: center;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition), box-shadow var(--transition);
}

.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-raised);
}

.feature-icon {
  font-size: 2rem;
  margin-bottom: var(--space-sm);
}

.feature-card h3 {
  margin-bottom: 0.5rem;
}

.feature-card p {
  font-size: 0.92rem;
}

/* ---------------------------------
   10. ROOMS
--------------------------------- */
.room-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

.room-card {
  background-color: var(--colour-surface);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition), box-shadow var(--transition);
}

.room-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-raised);
}

.room-body {
  padding: var(--space-md);
}

.room-body h3 {
  margin-bottom: 0.5rem;
}

.room-body > p {
  font-size: 0.94rem;
  margin-bottom: var(--space-sm);
}

.facility-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.facility-list li {
  font-size: var(--text-xs);   /* 14px floor */
  font-weight: 700;
  background-color: var(--colour-surface-2);
  color: var(--colour-ink);
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
}

/* A card left alone on the last row sits in the middle, not on the left. */
@media (min-width: 700px) and (max-width: 1199px) {
  .room-grid > .room-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - var(--space-md) / 2);
  }
}

/* Seven rooms read better three across on wide screens. */
@media (min-width: 1200px) {
  .room-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .room-grid > .room-card:last-child:nth-child(3n + 1) {
    grid-column: 2;
  }
}

/* ---------------------------------
   11. BREAKFAST (SPLIT LAYOUT)
--------------------------------- */
/* Shared .split-layout rules above cover this section */

/* ---------------------------------
   12. DISCOVER LLANDUDNO
--------------------------------- */
.destination-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.destination-card h3 {
  margin-bottom: 0.35rem;
}

.destination-card p {
  font-size: 0.92rem;
}

/* ---------------------------------
   13. GALLERY (MASONRY)
--------------------------------- */
.masonry-grid {
  columns: 3;
  column-gap: var(--space-md);
}

.masonry-item {
  break-inside: avoid;
  margin-bottom: var(--space-md);
  aspect-ratio: 4 / 3;
  transition: transform var(--transition);
}

.masonry-item.masonry-tall {
  aspect-ratio: 3 / 4;
}

.masonry-item:hover {
  transform: scale(1.02);
}

/* ---------------------------------
   14. REVIEWS
--------------------------------- */
.review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.review-card {
  background-color: var(--colour-surface);
  padding: var(--space-lg) var(--space-md);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  border-top: 3px solid var(--colour-accent);
}

.review-score {
  color: var(--colour-accent-text);
  letter-spacing: 0.1em;
  margin-bottom: var(--space-sm);
}

.review-quote {
  color: var(--colour-ink);
  font-style: italic;
  margin-bottom: var(--space-sm);
}

.review-author {
  font-size: var(--text-xs);   /* 14px floor */
  font-weight: 700;
  color: var(--colour-muted);
}

/* ---------------------------------
   15. CONTACT / FORM
--------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: var(--space-xl);
}

.contact-details {
  background-color: var(--colour-ink);
  color: var(--colour-bg);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  height: fit-content;
}

.contact-details a {
  overflow-wrap: anywhere;   /* the email address is one long word */
}

.contact-details h3 {
  color: var(--colour-surface);
  margin-bottom: var(--space-md);
}

.contact-list li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.contact-list a {
  color: var(--colour-bg);
  border-bottom: 1px solid rgba(246, 243, 238, 0.3);
}

.contact-list a:hover {
  color: var(--colour-accent-light);
}

.contact-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(246, 243, 238, 0.1);
}

.enquiry-form {
  background-color: var(--colour-surface);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
}

.form-row {
  margin-bottom: var(--space-md);
  display: flex;
  flex-direction: column;
}

.form-row label {
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
  color: var(--colour-ink);
}

.form-row input,
.form-row textarea {
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--colour-line);
  border-radius: var(--radius-sm);
  background-color: var(--colour-bg);
  color: var(--colour-ink);
  transition: border-color var(--transition);
}

.form-row input:focus,
.form-row textarea:focus {
  border-color: var(--colour-accent);
  outline: none;
}

.form-row.has-error input,
.form-row.has-error textarea {
  border-color: #b23b3b;
}

.form-error {
  color: #b23b3b;
  font-size: var(--text-xs);   /* 14px floor */
  margin-top: 0.3rem;
  min-height: 1.1em;
}

.form-submit {
  width: 100%;
}

/* Shows "Sending…", then the result. Empty until the form is sent. */
.form-success {
  margin-top: var(--space-sm);
  padding: 0.9rem 1rem;
  background-color: var(--colour-surface-2);
  color: var(--colour-ink);
  border-radius: var(--radius-sm);
  font-weight: 700;
  text-align: center;
}

.form-success:empty {
  display: none;
}

.form-consent {
  margin-bottom: var(--space-sm);
  font-size: var(--text-xs);
  color: var(--colour-muted);
}

/* The spam trap. Off-screen, not display: none, which some bots skip. */
.form-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Event pages (fireworks.html): a long read with a facts panel. */
.event-page {
  max-width: 52rem;
}

.event-page h1 {
  margin-bottom: var(--space-sm);
}

.event-page p + p {
  margin-top: var(--space-sm);
}

.event-page__lead {
  font-size: var(--text-md);
}

.event-page h2 {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xs);
  font-size: var(--text-xl);
}

.event-page p a:not(.btn) {
  color: var(--colour-accent-text);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.event-facts {
  margin: var(--space-lg) 0 0;
  padding: var(--space-sm) var(--space-md);
  background-color: var(--colour-surface-2);
  border-radius: var(--radius-md);
}

.event-facts__row {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: var(--space-xs) var(--space-md);
  padding: var(--space-sm) 0;
}

.event-facts__row + .event-facts__row {
  border-top: 1px solid var(--colour-line);
}

.event-facts dt {
  font-weight: 700;
  color: var(--colour-ink);
}

.event-facts dd {
  margin: 0;
  color: var(--colour-text);
}

.event-page__photo {
  margin: var(--space-lg) 0 0;
}

.event-page__photo .photo {
  /* The photo keeps its own shape: Gareth Ellidge's credit mark sits in its
     bottom corner and must not be cropped off. width/height on the img
     reserve the space, so nothing shifts. */
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.event-page__photo img {
  width: 100%;
  height: auto;
}

.event-page__photo figcaption {
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--colour-muted);
}

.event-page__photo figcaption a {
  color: var(--colour-accent-text);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.event-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.event-faq h3 {
  margin-top: var(--space-md);
  margin-bottom: 0.25rem;
  font-size: var(--text-lg);
}

.event-page__more {
  margin-top: var(--space-xl);
}

.event-page__updated {
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
}

@media (max-width: 559px) {
  .event-facts__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.25rem;
  }
}

/* What's On: a pointer to an event page, above the daily listings. */
.whats-on__feature {
  margin-top: var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  border-left: 4px solid var(--colour-accent);
  background-color: var(--colour-surface-2);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.whats-on__feature a {
  color: var(--colour-accent-text);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* What's On: listings built by assets/js/whats-on.js from the daily feed. */
.whats-on {
  max-width: 52rem;
}

.whats-on__intro h1 {
  margin-bottom: var(--space-sm);
}

.whats-on__list {
  margin-top: var(--space-lg);
}

.whats-on__day + .whats-on__day {
  margin-top: var(--space-lg);
}

.whats-on__day-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
  padding-bottom: var(--space-xs);
  border-bottom: 2px solid var(--colour-line);
  font-size: var(--text-xl);
}

.whats-on__day-name {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--colour-accent-text);
}

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

.whats-on__item {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
  gap: var(--space-sm);
  align-items: center;
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--colour-line);
}

.whats-on__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-pill);
  background-color: var(--colour-surface-2);
  color: var(--colour-accent-text);
}

.whats-on__icon svg {
  width: 1.125rem;
  height: 1.125rem;
}

.whats-on__title {
  color: var(--colour-ink);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.whats-on__title a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--colour-accent);
  text-underline-offset: 0.2em;
}

.whats-on__title a:hover,
.whats-on__title a:focus-visible {
  color: var(--colour-accent-text);
}

.whats-on__venue {
  font-size: var(--text-sm);
}

.whats-on__tag {
  font-size: var(--text-xs);
  font-weight: 600;
  white-space: nowrap;
  padding: 0.25rem 0.75rem;
  border: 1px solid var(--colour-line);
  border-radius: var(--radius-pill);
  color: var(--colour-ink);
}

.whats-on__status,
.whats-on__updated,
.whats-on__note {
  margin-top: var(--space-md);
}

.whats-on__status a,
.whats-on__note a {
  color: var(--colour-accent-text);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Under 560px the tag drops under the title so long names keep their width. */
@media (max-width: 559px) {
  .whats-on__item {
    grid-template-columns: 2.5rem minmax(0, 1fr);
  }

  .whats-on__tag {
    grid-column: 2;
    justify-self: start;
  }
}

/* Plain pages: privacy policy, thank-you and 404. */
.page-plain {
  min-height: 60vh;
}

.prose {
  max-width: 46rem;
}

.prose h1 {
  margin-bottom: var(--space-md);
}

.prose h2 {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xs);
  font-size: var(--text-xl);
}

.prose p + p {
  margin-top: var(--space-sm);
}

.prose p a:not(.btn),
.form-consent a {
  color: var(--colour-accent-text);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* ---------------------------------
   16. LOCATION
--------------------------------- */
.location-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--space-xl);
  align-items: center;
}

.location-info h3 {
  margin-bottom: var(--space-sm);
}

.location-info > p {
  margin-bottom: var(--space-md);
}

/* ---------------------------------
   17. FOOTER
--------------------------------- */
.site-footer {
  background-color: var(--colour-footer-bg);
  color: var(--colour-bg);
  padding-top: var(--space-xxl);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
}

.footer-brand p {
  color: var(--colour-inverse-muted);
  margin: var(--space-sm) 0 var(--space-md);
  max-width: 320px;
}

.footer-logo .logo-text {
  color: var(--colour-surface);
}

.social-links {
  display: flex;
  gap: 0.6rem;
}

.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: rgba(246, 243, 238, 0.1);
  color: var(--colour-bg);
  font-weight: 700;
  font-size: var(--text-xs);   /* 14px floor */
  transition: background-color var(--transition);
}

.social-icon:hover {
  background-color: var(--colour-accent);
  color: var(--colour-ink);
}

.footer-heading {
  font-family: var(--font-body);
  color: var(--colour-accent-light);
  text-transform: uppercase;
  font-size: var(--text-xs);   /* 14px floor */
  letter-spacing: 0.08em;
  margin-bottom: var(--space-sm);
}

.footer-nav ul {
  display: grid;
  gap: 0.55rem;
}

.footer-nav a {
  color: var(--colour-inverse-muted);
  transition: color var(--transition);
}

.footer-nav a:hover {
  color: var(--colour-surface);
}

.footer-contact p {
  color: var(--colour-inverse-muted);
  margin-bottom: 0.5rem;
}

.footer-contact a:hover {
  color: var(--colour-surface);
}

.footer-bottom {
  border-top: 1px solid rgba(246, 243, 238, 0.12);
  padding: var(--space-md) 0;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--colour-inverse-muted);
}

/* The base paragraph colour was beating .footer-bottom on specificity, so the
   copyright line rendered in body plum on the deep-plum footer: 2.0:1. */
.footer-bottom p {
  color: var(--colour-inverse-muted);
}

/* ---------------------------------
   18. BACK TO TOP
--------------------------------- */
.back-to-top {
  position: fixed;
  right: var(--space-md);
  bottom: var(--space-md);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--colour-ink);
  color: var(--colour-surface);
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-raised);
  z-index: 800;
  transition: transform var(--transition), background-color var(--transition), opacity var(--transition);
  opacity: 0;
  pointer-events: none;
}

.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.back-to-top:hover {
  background-color: var(--colour-accent);
  color: var(--colour-ink);
  transform: translateY(-3px);
}

/* ---------------------------------
   19. SCROLL REVEAL ANIMATION
--------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------------------------
   20. RESPONSIVE BREAKPOINTS
--------------------------------- */

/* Narrow desktop: keep the nav on one line, tighter.
   Fonts are font-display: optional, so a first visit often renders in
   Georgia / Segoe UI, which set wider than Fraunces and Inter. Measured
   with the fallback fonts, the full-size nav overflowed at 1280px (77px) and
   at 1366px (34px), so the tighter nav runs to 1439px and the drawer below
   takes over under 1200px. */
@media (max-width: 1439px) and (min-width: 1200px) {
  .primary-nav { gap: var(--space-md); }
  .primary-nav ul { gap: var(--space-sm); }
  .nav-link { font-size: var(--text-xs);   /* 14px floor */ }
  .nav-cta { padding: 0.75rem 1.2rem; }
}

/* Tablet */
@media (max-width: 991px) {
  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .room-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }

  .destination-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  .masonry-grid {
    columns: 2;
  }

  /* minmax(0, 1fr), not 1fr: a bare 1fr track is at least as wide as its
     widest unbreakable content, and the enquiry form and the email address
     were pushing the page 20px wider than a 375px phone. */
  .contact-grid,
  .welcome-grid,
  .location-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-details {
    order: 2;
  }

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

  .footer-brand {
    grid-column: 1 / -1;
  }
}

/* Mobile */
/* The horizontal nav runs out of room well before the phone breakpoint:
   nine links plus the booking button need about 1000px in Fraunces and
   Inter, and nearer 1200px in the fallback fonts a first visit can get. The
   drawer therefore takes over below 1200px, while the rest of the mobile
   layout still starts at 700px. */
@media (max-width: 1199px) {
  .nav-toggle {
    display: flex;
  }

  /* Fixed to the viewport, not to the header — see the .site-header::before
     note above. bottom: 0 now does the right thing, so no explicit height. */
  .primary-nav {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--colour-bg);
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--space-lg) var(--space-md);
    gap: var(--space-lg);
    transform: translateX(100%);
    transition: transform var(--transition);
    overflow-y: auto;
  }

  .primary-nav.is-open {
    transform: translateX(0);
  }

  .primary-nav ul {
    flex-direction: column;
    gap: var(--space-md);
    width: 100%;
  }

  .nav-link {
    display: block;
    font-size: 1.1rem;
  }

  .nav-cta {
    width: 100%;
    text-align: center;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
}

@media (max-width: 700px) {
  :root {
    --space-xxl: 4rem;
    --space-xl: 2.5rem;
  }

  .hero {
    align-items: center;
    text-align: left;
  }

  .hero-content {
    padding-bottom: 0;
  }

  .feature-grid,
  .room-grid,
  .destination-grid {
    grid-template-columns: 1fr;
  }

  .masonry-grid {
    columns: 1;
  }

  .split-layout {
    grid-template-columns: 1fr;
  }

  .split-image {
    order: -1;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .hero-actions .btn {
    width: 100%;
    text-align: center;
  }
}

/* Large screens */
@media (min-width: 1400px) {
  :root {
    --container-width: 1280px;
  }
}

/* ---------------------------------
   21. BUILT-BY CREDIT
--------------------------------- */
/* ---------- "Website by GOAT Online" credit (BRAND_GUIDELINES.md §8) ----------
   Goes on every page of every site we build, as a condition of the free
   build. It is a credit, not an advert: quiet, under the copyright line,
   never in the footer columns and never competing with the client's brand.

   The coloured badge reads on any background, so it needs no filter, and the
   words are live text: legible at any size, and no opacity on text. The link
   is a 44px tap target. justify-self keeps it from stretching across a grid
   footer, which would make the whole row a link.

   A client may ask for it to be removed. That is a paid option, not an
   argument. Do not delete these rules to win a discussion. */
a.credit {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: var(--space-3);
  min-height: 2.75rem;
  margin-top: var(--space-4);
  color: var(--colour-inverse-muted);
  text-decoration: none;
}

a.credit:hover,
a.credit:focus-visible {
  color: var(--colour-inverse-text);
}

.credit__mark {
  width: 26px;
  height: 26px;
  display: block;
}

.credit__text {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Keeps short terms such as "Wi-Fi" from splitting across lines. */
.nowrap {
  white-space: nowrap;
}

/* ---------------------------------
   BREAKFAST SLIDESHOW AND MENU
--------------------------------- */
/* Photos fade from one to the next, seven seconds each (photos.js). The
   breakfast one (slideshow--css, three photos) also runs on CSS alone when
   JavaScript is off; the others then show their first photo. The first photo shows on its own when motion
   is reduced, and the pause control meets WCAG 2.2.2. */
.slideshow {
  position: relative;
}

.slideshow__frame img {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.slideshow__frame img.is-active {
  opacity: 1;
}

/* With JavaScript, photos.js changes the photo instead of the animation. */
.js .slideshow__frame img {
  animation: none;
  transition: opacity 1.2s ease;
}

@media (prefers-reduced-motion: no-preference) {
  html:not(.js) .slideshow--css .slideshow__frame img {
    animation: slideshow-fade 21s infinite;
  }

  html:not(.js) .slideshow--css .slideshow__frame img:nth-child(2) {
    animation-delay: -14s;
  }

  html:not(.js) .slideshow--css .slideshow__frame img:nth-child(3) {
    animation-delay: -7s;
  }

  .slideshow__toggle:checked ~ .slideshow__frame img {
    animation-play-state: paused;
  }
}

@keyframes slideshow-fade {
  0%,
  28% {
    opacity: 1;
  }

  33.4%,
  94.6% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* The checkbox stays reachable by keyboard; its label is the visible button. */
.slideshow__toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.slideshow__pause {
  position: absolute;
  right: var(--space-sm);
  bottom: var(--space-sm);
  z-index: 2;
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  background-color: var(--colour-surface);
  color: var(--colour-ink);
  font-size: var(--text-xs);
  font-weight: 700;
  cursor: pointer;
}

.slideshow__toggle:focus-visible + .slideshow__pause {
  outline: 3px solid var(--colour-ink);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .slideshow__pause {
    display: none;
  }
}

.breakfast-menu {
  margin-block: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background-color: var(--colour-surface);
}

.breakfast-menu h3 {
  margin-bottom: 0.5rem;
}

.breakfast-menu dl {
  margin-bottom: var(--space-md);
}

.breakfast-menu dt {
  font-weight: 700;
  color: var(--colour-ink);
}

.breakfast-menu dd {
  margin: 0 0 0.75rem;
}

.slideshow__pause-off,
.slideshow__toggle:checked + .slideshow__pause .slideshow__pause-on {
  display: none;
}

.slideshow__toggle:checked + .slideshow__pause .slideshow__pause-off {
  display: inline;
}

/* Round previous, next and close buttons, used on the breakfast slideshow
   and in the photo viewer. 44px so they are easy to hit on a phone. */
.photo-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--colour-surface);
  color: var(--colour-ink);
  box-shadow: var(--shadow-card);
  cursor: pointer;
}

.photo-nav:hover {
  color: var(--colour-ink-light);
}

.photo-nav:focus-visible {
  outline: 3px solid var(--colour-surface);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--colour-ink);
}

/* Hidden until JavaScript is there to make them work. */
.slideshow__nav {
  display: none;
}

.js .slideshow__nav {
  position: absolute;
  inset: 50% var(--space-sm) auto;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none;
}

.js .slideshow__nav .photo-nav {
  pointer-events: auto;
}

/* The order form in the gallery is shown whole, not cropped. */
.masonry-item--document {
  background-color: var(--colour-surface);
}

.masonry-item--document img {
  object-fit: contain;
}

.masonry-open {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.masonry-open:focus-visible {
  outline: 3px solid var(--colour-ink);
  outline-offset: 3px;
}

/* A room's photo opens all of that room's photos in the viewer. The
   button is added by photos.js; without JavaScript the photo is plain. */
.room-open {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.room-open:focus-visible {
  outline: 3px solid var(--colour-ink);
  outline-offset: -3px;
}

.room-open__count {
  position: absolute;
  right: var(--space-sm);
  bottom: var(--space-sm);
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-sm);
  background-color: var(--colour-ink);
  color: var(--colour-surface);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.3;
}

/* One photo on its own needs no previous and next. */
.lightbox--single .lightbox__prev,
.lightbox--single .lightbox__next {
  display: none;
}

/* ---------------------------------
   PHOTO VIEWER
--------------------------------- */
.lightbox {
  width: 100vw;
  max-width: none;
  height: 100vh;
  height: 100svh;
  max-height: none;
  margin: 0;
  padding: var(--space-lg) var(--space-md);
  border: 0;
  background: transparent;
}

.lightbox::backdrop {
  background-color: color-mix(in srgb, var(--colour-footer-bg) 94%, transparent);
}

.lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox__img {
  max-width: min(100%, 1100px);
  max-height: calc(100svh - 7rem);
  width: auto;
  height: auto;
  border-radius: var(--radius-md);
  background-color: var(--colour-surface);
  object-fit: contain;
}

.lightbox__count {
  position: absolute;
  left: 50%;
  bottom: var(--space-sm);
  margin: 0;
  transform: translateX(-50%);
  color: var(--colour-surface);
  font-size: var(--text-xs);
  font-weight: 700;
}

.lightbox__prev,
.lightbox__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox__prev {
  left: var(--space-sm);
}

.lightbox__next {
  right: var(--space-sm);
}

.lightbox__close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
}

/* ---------------------------------
   RESTAURANT CARDS (Explore Llandudno)
--------------------------------- */
/* Each restaurant is a coloured card that links out; they take turns like
   the photo slideshows. Hidden cards are also invisible to the keyboard. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.eat-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: var(--space-md) 4.25rem 3rem;
  text-align: center;
  text-decoration: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.2s ease, visibility 0s linear 1.2s;
}

.eat-card.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 1.2s ease;
}

.eat-card:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: -8px;
}

.eat-card__type {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eat-card__name {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.15rem + 0.9vw, 1.75rem);
  line-height: 1.1;
}

.eat-card__go {
  margin-top: 0.5rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.eat-card--plum {
  background-color: var(--colour-inverse-bg);
  color: var(--colour-inverse-text);
}

.eat-card--deep {
  background-color: var(--colour-footer-bg);
  color: var(--colour-inverse-text);
}

.eat-card--plum .eat-card__type,
.eat-card--deep .eat-card__type {
  color: var(--colour-inverse-muted);
}

.eat-card--amber {
  background-color: var(--colour-accent);
  color: var(--colour-on-accent);
}

.eat-card--lilac {
  background-color: var(--colour-surface-2);
  color: var(--colour-ink);
}

/* Walk cards carry a sentence, so it is set smaller than a street name. */
.eat-card__where--long {
  font-size: var(--text-sm);
  line-height: 1.4;
}

/* On the narrowest phones the cards need every bit of width beside the arrows. */
@media (max-width: 380px) {
  .eat-card {
    padding-inline: 3.75rem;
  }

  .eat-card__name {
    font-size: 1.25rem;
  }

  .eat-card__where--long {
    font-size: var(--text-xs);
  }
}

/* ---------------------------------
   GOOD TO KNOW (house rules) AND THE LOCATION MAP
--------------------------------- */
.house-rules {
  display: grid;
  gap: var(--space-md) var(--space-xl);
  max-width: 1000px;
  margin: 0 auto;
}

@media (min-width: 992px) {
  .house-rules {
    grid-template-columns: repeat(2, 1fr);
  }
}

.house-rules dt {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  color: var(--colour-ink);
}

.house-rules dd {
  margin: 0.25rem 0 0;
}

.map-inset__frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  aspect-ratio: 4 / 3;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background-color: var(--colour-surface);
  box-shadow: var(--shadow-card);
  text-align: center;
}

.map-inset__frame.is-loaded {
  padding: 0;
  overflow: hidden;
}

.map-inset__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.map-inset__address {
  margin: 0;
  color: var(--colour-ink);
}

.map-inset__note {
  margin: 0;
  font-size: var(--text-xs);
  color: var(--colour-muted);
}

.map-inset--wide {
  margin-top: var(--space-xl);
}

@media (min-width: 700px) {
  .map-inset--wide .map-inset__frame {
    aspect-ratio: 21 / 9;
  }
}

/* Cymraeg / English link (24 Oct 2026). Every English page links to its
   Welsh page and back, as the Welsh Language Standards ask. On a phone it
   sits beside the menu button; from 1200px it comes after the nav. */
.lang-switch {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.5rem;
  font-weight: 700;
  font-size: var(--text-xs);
  color: var(--colour-ink);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  white-space: nowrap;
  transition: color var(--transition);
}

.header-inner {
  gap: var(--space-sm);
}

.js .site-header--overlay:not(.is-scrolled):not(.is-open) .lang-switch {
  color: var(--colour-surface);
}

@media (min-width: 1200px) {
  .header-inner { gap: var(--space-md); }
  .primary-nav { order: 2; margin-left: auto; }
  .lang-switch { order: 3; margin-left: 0; }
}

/* From 1200px the nav fills the bar, so the language link hangs just below
   it at the right, as a small tab in the bar's own colour. It stays put as
   the page scrolls, like the bar. */
@media (min-width: 1200px) {
  .header-inner { position: relative; }
  .lang-switch,
  .js .site-header--overlay:not(.is-scrolled):not(.is-open) .lang-switch {
    position: absolute;
    top: 100%;
    right: var(--space-md);
    min-height: 2rem;
    padding: 0 0.75rem;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    background-color: rgba(246, 243, 238, 0.96);
    color: var(--colour-ink);
    box-shadow: var(--shadow-card);
  }
}

/* Welsh button labels run longer than the English, so on a phone they wrap
   instead of pushing the page sideways. */
html[lang="cy"] .btn {
  white-space: normal;
  text-align: center;
}