* { box-sizing: border-box; }
body { margin: 0; font-family: "Libre Franklin", "Helvetica Neue", Arial, sans-serif; font-size: 16px; line-height: 1.66; color: #333; background: #fff; }
a { color: #222; box-shadow: inset 0 -1px 0 #222; text-decoration: none; }
a:hover { color: #000; box-shadow: inset 0 -2px 0 #000; }

/* Header: full-screen image, like Twenty Seventeen's front page */
header { position: relative; height: 100vh; display: flex; align-items: flex-end; color: #fff;
         background: #555 url("/images/header.jpg") center / cover no-repeat; }
header::before { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 50%, rgba(0,0,0,.4)); }
.branding { position: relative; width: 100%; max-width: 1000px; margin: 0 auto; padding: 0 2em 6em; }
.branding h1 { margin: 0; font-size: 2.25rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1.25; }
.branding p { margin: 0; font-size: 1rem; opacity: .9; }
.scroll { position: absolute; right: 2em; bottom: 6em; width: 2.5em; height: 2.5em; border-radius: 50%;
          background: rgba(0,0,0,.25); color: #fff; box-shadow: none; display: grid; place-items: center; font-size: 1.2em; }
.scroll:hover { color: #fff; box-shadow: none; background: rgba(0,0,0,.5); }

/* Panels */
section { max-width: 1000px; margin: 0 auto; padding: 6em 2em; border-top: 1px solid #eee; display: grid; grid-template-columns: 1fr; gap: 1em; }
section:first-of-type { border-top: 0; }
@media (min-width: 48em) { section { grid-template-columns: 1fr 2fr; gap: 3em; } section > .full { grid-column: 1 / -1; } }
h2 { margin: 0; font-size: .875rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #222; }
h3 { margin: 1.5em 0 .5em; font-size: .875rem; font-weight: 800; color: #222; }
ul { margin: 0; padding-left: 1.2em; }
p { margin: 0 0 1em; }

table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
td { padding: .5em; border-bottom: 1px solid #eee; vertical-align: top; }
td:first-child { font-weight: 600; color: #222; }
.table-wrap { overflow-x: auto; }
.rented { color: #ff6900; }
.free { color: #00d084; }
.note { font-size: .875rem; color: #767676; margin-top: 1em; }

footer { border-top: 1px solid #eee; padding: 2em; text-align: center; font-size: .875rem; color: #767676; }

/* Sub pages (plans, photos) */
.topbar { padding: 1.5em 2em; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }
.topbar .title { font-weight: 800; letter-spacing: .08em; text-transform: uppercase; box-shadow: none; }
.page-title { max-width: 1000px; margin: 0 auto; padding: 3em 2em 0; font-size: 1.5rem; font-weight: 300; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75em; }
.gallery a { box-shadow: none; display: block; }
.gallery img { width: 100%; display: block; background: #eee; }
.gallery img { aspect-ratio: 4 / 3; object-fit: cover; }
.tour { display: block; width: 100%; height: calc(100vh - 5em); min-height: 320px; border: 0; } /* 5em ≈ topbar */
.map { width: 100%; aspect-ratio: 4 / 3; max-height: 450px; border: 0; }

/* Lightbox */
.lightbox { border: 0; padding: 0; background: transparent; width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; }
.lightbox::backdrop { background: rgba(0, 0, 0, .92); }
.lightbox img { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox button { position: absolute; top: 50%; transform: translateY(-50%); width: 3rem; height: 5rem; border: 0; cursor: pointer;
                   background: rgba(0, 0, 0, .4); color: #fff; font-size: 3rem; line-height: 1; }
.lightbox button:hover { background: rgba(0, 0, 0, .7); }
.lightbox .prev { left: 0; }
.lightbox .next { right: 0; }
.lightbox .close { top: 0; right: 0; transform: none; height: 3rem; font-size: 2rem; }
.lightbox .counter { position: absolute; bottom: .5em; left: 0; right: 0; text-align: center; color: #fff; font-size: .875rem; }