:root {
  --paper: #FBFAF7;
  --white: #FFFFFF;
  --ink: #1E2A3A;
  --ink-2: #3A4555;
  --muted: #556070;
  --line: #E6E2DA;
  --sage: #EEF1EA;

  /* Lodgify search bar */
  --ldg-psb-background: #ffffff;
  --ldg-psb-border-radius: 0.42em;
  --ldg-psb-box-shadow: 0px 24px 54px 0px rgba(0, 0, 0, 0.08);
  --ldg-psb-padding: 14px;
  --ldg-psb-input-background: #ffffff;
  --ldg-psb-button-border-radius: 3.58em;
  --ldg-psb-color-primary: #1E2A3A;
  --ldg-psb-color-primary-lighter: #E3E6EB;
  --ldg-psb-color-primary-darker: #121A26;
  --ldg-psb-color-primary-contrast: #ffffff;
  --ldg-semantic-color-primary: #1E2A3A;
  --ldg-semantic-color-primary-lighter: #E3E6EB;
  --ldg-semantic-color-primary-darker: #121A26;
  --ldg-semantic-color-primary-contrast: #ffffff;
  --ldg-component-modal-z-index: 999;

  /* Lodgify book now box */
  --ldg-bnb-background: #ffffff;
  --ldg-bnb-border-radius: 0.42em;
  --ldg-bnb-box-shadow: 0px 24px 54px 0px rgba(0, 0, 0, 0.08);
  --ldg-bnb-padding: 14px;
  --ldg-bnb-input-background: #ffffff;
  --ldg-bnb-button-border-radius: 3.58em;
  --ldg-bnb-color-primary: #1E2A3A;
  --ldg-bnb-color-primary-lighter: #E3E6EB;
  --ldg-bnb-color-primary-darker: #121A26;
  --ldg-bnb-color-primary-contrast: #ffffff;
  --ldg-component-calendar-cell-selection-bg-color: #1E2A3A;
  --ldg-component-calendar-cell-selection-color: #ffffff;
  --ldg-component-calendar-cell-selected-bg-color: #E3E6EB;
  --ldg-component-calendar-cell-selected-color: #1E2A3A;
  --ldg-bnb-font-family: inherit;
}

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

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

img { display: block; max-width: 100%; height: auto; }
h1, h2 { margin: 0; color: var(--ink); font-family: Fraunces, Georgia, serif; font-weight: 600; }
h1 { font-size: clamp(42px, 5.5vw, 68px); line-height: 1.05; }
h2 { font-size: clamp(32px, 4vw, 44px); line-height: 1.15; }
h2.sub { font-size: 30px; }
p { margin: 0; }
a { color: inherit; }
ul { margin: 0; padding: 0; }

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

.skip {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 1000;
  padding: 10px 18px;
  background: var(--ink);
  color: var(--white);
  border-radius: 3.58em;
}
.skip:focus { top: 12px; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section { padding: 88px 0; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid var(--ink);
  border-radius: 3.58em;
  background: var(--ink);
  color: var(--white);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: #121A26; }
.btn-plain { background: transparent; color: var(--ink); }
.btn-plain:hover { background: var(--sage); }

/* Header */
.site-header { border-bottom: 1px solid var(--line); }
.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 32px;
  padding-top: 16px;
  padding-bottom: 16px;
}
.brand { display: block; text-decoration: none; }
.brand-logo { width: 200px; height: auto; margin-bottom: 6px; }
.brand-line { display: block; color: var(--muted); font-size: 12px; letter-spacing: 0.08em; line-height: 1.5; text-transform: uppercase; }
.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; }
.site-nav a:not(.btn) { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; text-decoration: none; }
.site-nav a:not(.btn):hover { text-decoration: underline; text-underline-offset: 4px; }

/* Hero */
.hero { padding: 64px 0 88px; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.eyebrow { margin-bottom: 16px; color: var(--muted); font-size: 14px; font-weight: 600; letter-spacing: 0.14em; line-height: 1.4; text-transform: uppercase; }
.lead { margin-top: 20px; color: var(--ink-2); font-size: 19px; }
.widget-search { min-height: 154px; margin-top: 28px; }
.note { margin-top: 14px; color: var(--muted); font-size: 14px; }
.feature { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; }
#lodgify-search-bar, #lodgify-book-now-box { width: 100%; }

/* The search bar picks its row layout from the viewport, and that row needs
   about 830px. In the hero column it would overflow and hide the Search button,
   so lay it out as dates on one line, then guests and Search.
   Below about 1024px Lodgify switches to its stacked (column, max-content
   width, side margins) layout, so force the row and the full width here too,
   or the flex sizes below turn into heights. */
@media (min-width: 861px) {
  #lodgify-search-bar > div { width: 100%; max-width: none; }
  #lodgify-search-bar section { flex-direction: row; flex-wrap: wrap; gap: 12px; height: auto; width: 100%; max-width: none; margin: 0; }
  #lodgify-search-bar section > button:first-of-type > div { flex: 1 1 50%; width: auto; min-width: 0; }
  #lodgify-search-bar section > div:empty { display: none; }
  #lodgify-search-bar section > * { margin: 0; }
  #lodgify-search-bar section > button:first-of-type { flex: 1 1 100%; width: 100%; max-width: none; }
  #lodgify-search-bar section > button:not(:first-of-type) { flex: 1 1 200px; width: auto; max-width: none; }
  #lodgify-search-bar section > a { flex: 0 0 160px; width: 160px; }
}

/* Key facts */
.facts { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts ul { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; padding-top: 20px; padding-bottom: 20px; list-style: none; font-weight: 500; }

/* About */
.about { max-width: 760px; margin: 0 auto; }
.about p, .area-text p { margin-top: 20px; color: var(--ink-2); }

/* Photos */
.photos { padding-top: 0; }
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
  margin-top: 32px;
  list-style: none;
}
.gallery a { display: block; border-radius: 10px; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }

/* Inside and Included */
.band { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band .wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; }
.band p { margin-top: 16px; color: var(--ink-2); }
.band ul { margin-top: 16px; padding-left: 20px; color: var(--ink-2); }
.band li { margin-top: 6px; }

/* The area */
.area .wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: center; }

/* Book direct */
.book { background: var(--sage); }
.book .wrap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: start; }
.terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 32px; margin: 32px 0 0; }
.terms dt { color: var(--muted); font-size: 13px; line-height: 1.5; }
.terms dd { margin: 2px 0 0; font-weight: 500; overflow-wrap: anywhere; }
.terms a { display: inline-block; padding: 10px 0; margin: -10px 0; }
.card {
  --ldg-bnb-box-shadow: none;
  --ldg-bnb-padding: 0;
  min-height: 269px;
  padding: 24px;
  background: var(--white);
  border-radius: 0.42em;
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.08);
}
#lodgify-book-now-box > div > div { width: 100%; max-width: none; }

/* Lodgify's default #999 labels fail contrast on white. */
#lodgify-book-now-box [data-testid^="book-now-box.date-picker.trigger"],
#lodgify-book-now-box [data-testid="book-now-box.minimum-price-per-night.text"],
#lodgify-book-now-box p[data-testid="text"] { color: var(--muted); }

/* Lodgify paints a chosen check-in red when that day is also restricted for
   check-out. It reads like an error, so keep it navy. */
div.selected.selection-start.disabled { background-color: var(--ink) !important; color: var(--white) !important; }

/* Footer */
.site-footer { padding: 28px 0; color: var(--muted); font-size: 15px; }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; }
.foot-name { color: var(--ink); font-family: Fraunces, Georgia, serif; font-size: 18px; font-weight: 600; }
.link-btn { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; min-height: 44px; }

/* Lightbox */
.lightbox {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(18, 26, 38, 0.94);
  color: var(--white);
}
.lightbox[open] { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.lightbox::backdrop { background: rgba(18, 26, 38, 0.94); }
.lightbox figure { display: flex; align-items: center; justify-content: center; min-height: 0; margin: 0; padding: 64px 16px 8px; }
.lightbox img { max-width: min(100%, 1200px); max-height: 100%; width: auto; height: auto; border-radius: 10px; }
.lightbox-bar { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 8px 16px 20px; }
.lightbox-caption { flex: 0 1 560px; font-size: 15px; text-align: center; }
.lightbox button {
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  background: transparent;
  color: var(--white);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.lightbox button:hover { background: rgba(255, 255, 255, 0.14); }
.lightbox :focus-visible { outline-color: var(--white); }
.lightbox-close { position: absolute; top: 12px; right: 16px; }

/* The area page */
.site-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
.area-intro { padding: 64px 0 0; }
.area-intro .lead { max-width: 760px; }
.area-hero { width: 100%; aspect-ratio: 16 / 9; margin-top: 40px; object-fit: cover; border-radius: 16px; }
.area-sub { max-width: 760px; margin-top: 16px; color: var(--ink-2); }
.place-feature { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: center; margin-top: 40px; }
.place-feature h3 { font-size: 30px; }
.place-feature p:not(.place-drive) { margin-top: 16px; color: var(--ink-2); }
.place-links { display: flex; flex-wrap: wrap; gap: 0 24px; }
h3 { margin: 0; color: var(--ink); font-family: Fraunces, Georgia, serif; font-size: 22px; font-weight: 600; line-height: 1.25; }
.places { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 40px 24px; margin-top: 48px; list-style: none; }
.place img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.place h3 { margin-top: 16px; }
.place p { margin-top: 8px; color: var(--ink-2); font-size: 16px; }
.place .place-drive, .place-drive { color: var(--muted); font-size: 14px; font-weight: 500; }
.place .place-drive { margin-top: 2px; }
.place-link, .place-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-underline-offset: 4px; }
.area-eryri { padding-top: 72px; }
.area-island { padding-top: 0; }
.book .area-cta { display: block; text-align: center; }
.area-cta p { margin: 12px 0 24px; color: var(--ink-2); }
.area-credits { padding: 48px 0 8px; color: var(--muted); font-size: 14px; }
.area-credits h2 { font-size: 22px; }
.area-credits p { margin-top: 8px; }
.area-credits ul { margin-top: 12px; padding-left: 18px; columns: 2 320px; column-gap: 32px; }
.area-credits li { margin-top: 2px; break-inside: avoid; }

/* Cookie banner */
.consent {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 900;
  max-width: 560px;
  margin: 0 auto;
  padding: 18px 20px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 24px 54px rgba(0, 0, 0, 0.12);
  font-size: 15px;
}
.consent[hidden] { display: none; }
.consent-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

@media (max-width: 860px) {
  .section { padding: 56px 0; }
  .photos { padding-top: 0; }
  .hero { padding: 36px 0 56px; }
  .area-intro { padding-top: 36px; }
  .area-hero { margin-top: 28px; }
  .area-eryri { padding-top: 48px; }
  .place-feature { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .hero .wrap, .band .wrap, .area .wrap, .book .wrap { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .facts ul { justify-content: flex-start; gap: 6px 24px; }
  .widget-search { min-height: 234px; }
  #lodgify-search-bar > div, #lodgify-search-bar section { width: 100%; max-width: none; }
  #lodgify-search-bar section > button, #lodgify-search-bar section > a { width: 100%; min-width: 0; max-width: 100%; }
  #lodgify-search-bar section > button:first-of-type > div { flex: 1 1 50%; width: auto; min-width: 0; }
}

@media (max-width: 600px) {
  .site-header .wrap { flex-direction: column; align-items: flex-start; }
  .terms > div:last-child { grid-column: 1 / -1; }
}

/* Photos: first nine show, the rest behind a button */
.gallery li[hidden] { display: none; }
.gallery-more { margin-top: 20px; text-align: center; }

/* Getting here */
.directions .wrap > * { max-width: 760px; }
.directions h2 { margin-top: 48px; }
.directions h2:first-child { margin-top: 0; }
.directions p, .directions ol, .directions ul { margin-top: 16px; color: var(--ink-2); }
.route { padding-left: 1.4em; }
.route li, .arrive li { margin-top: 10px; padding-left: 4px; }
.arrive { padding-left: 1.2em; }
.terms > div.wide { grid-column: 1 / -1; }
.w3w { margin-top: 20px; color: var(--ink-2); }
.w3w a { font-weight: 600; overflow-wrap: anywhere; }