/* The first sketch: only enough to make clear what is what. */

/* Home: the main house over its pond, filling the screen, with the water
   line kept in the middle of it. The line lies at 54.5 % of the photo's
   height; the photo is put so that point is at the middle of the screen,
   and made large enough to cover the screen either way. Across, the house
   stands at about 85 % of the photo, and that point is kept at 85 % of
   the screen, so a narrow screen still shows the house. */
.home {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.home__photo {
  position: absolute;
  top: 50%;
  left: 85%;
  width: auto;
  max-width: none;
  height: max(112vh, calc(100vw * 1826 / 3168));
  height: max(112svh, calc(100vw * 1826 / 3168));
  transform: translate(-85%, -54.5%);
}

/* Above the water: accommodation. Below it: fishing. */
.crossroads {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr 1fr;
}

.crossroads__link {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(3rem, 12vw, 12rem);
  line-height: 1;
  text-decoration: none;
  text-shadow: 0 0.04em 0.35em rgb(0 0 0 / 0.6);
}

.crossroads__link:hover,
.crossroads__link:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 0.04em;
  text-underline-offset: 0.12em;
}

/* The logo of the old site, at the left of every header, and in the
   corner of the home photo, in white there as the old site had it. */
.site-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.site-logo img {
  display: block;
  width: 60px;
  height: auto;
}

.home__logo {
  position: absolute;
  z-index: 1;
  top: 1.25rem;
  left: 1.25rem;
}

.home__logo img {
  width: 80px;
  filter: drop-shadow(0 0 0.4rem rgb(0 0 0 / 0.5));
}

/* Plain pages: the header sits on the page, not over a picture. */
.sketch-top .site-header {
  position: static;
  color: var(--color-text);
}

/* With no picture carrying the name, the header carries it home. */
.sketch-top .wordmark--header {
  display: inline-flex;
  color: var(--color-text);
}

.sketch .stay,
.sketch .block {
  margin-top: 3rem;
}

.sketch .stay__capacity,
.sketch .note {
  font-weight: 700;
}

.sketch .booking a {
  font-weight: 700;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 0.5rem;
  margin: 1rem 0 2rem;
}

.gallery img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* The permits' payment codes must be shown whole. */
.gallery img[src$=".png"] {
  aspect-ratio: auto;
  object-fit: contain;
}

.contact {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 1.5rem;
}

.contact dd {
  margin: 0;
}