/* Site styles. Change colors and fonts here. */
:root {
  --bg: #fafaf8;
  --fg: #1a1a1a;
  --muted: #6b6b6b;
  --line: #e2e2de;
  --font: system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --max: 80rem;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #111; --fg: #eee; --muted: #999; --line: #2a2a2a; }
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 17px/1.6 var(--font); }
a { color: inherit; }
main { max-width: var(--max); margin: 0 auto; padding: 0 1rem 4rem; }

/* header */
.site-head { max-width: var(--max); margin: 0 auto; padding: 1.5rem 1rem;
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: baseline; justify-content: space-between; }
.logo { font: 600 1.25rem var(--serif); text-decoration: none; }
.site-head nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.site-head nav a { text-decoration: none; color: var(--muted); }
.site-head nav a:hover, .site-head nav a.active { color: var(--fg); }

/* page header + text */
.page-head { margin: 2rem 0; }
.page-head h1 { font: 400 2.5rem/1.1 var(--serif); margin: 0 0 .5rem; }
.subtitle { color: var(--muted); max-width: 40em; margin: 0; font-style: italic; }
.prose { max-width: 40em; margin-bottom: 2rem; }

/* tables in page text (e.g. the rates on the booking page) */
.prose:has(table) { max-width: 60em; }
.prose:has(table) > p { max-width: 40em; }
.prose table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .95rem; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: .7rem 1.25rem .7rem 0;
  border-bottom: 1px solid var(--line); }
.prose th { color: var(--muted); font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.prose td:nth-child(2) { white-space: nowrap; }
.prose td:last-child { color: var(--muted); font-style: italic; }
/* a full-width row that opens when clicked (<tr class="more"><td colspan="4"><details>…) */
.prose tr.more td { color: var(--fg); font-style: normal; white-space: normal; padding-top: 0; }
.prose details summary { cursor: pointer; color: var(--muted); font-size: .9rem; }
.prose details summary:hover { color: var(--fg); }
.prose details[open] summary { margin-bottom: .75rem; color: var(--fg); }
.prose details p, .prose details ul { margin: 0 0 .75rem; max-width: 40em; }
@media (max-width: 44rem) {  /* phones: each row becomes a stacked block */
  .prose thead { display: none; }
  .prose tr { display: block; padding: .9rem 0; border-bottom: 1px solid var(--line); }
  .prose td { display: block; padding: .1rem 0; border: 0; white-space: normal !important; }
}

/* photo with blurred placeholder that fades to the real image */
.ph { background-size: cover; overflow: hidden; }
.ph img { display: block; width: 100%; height: auto; opacity: 0; transition: opacity .4s; }
.ph img.loaded { opacity: 1; }

/* gallery: masonry-style columns */
.gallery figure { scroll-margin-top: 1.5rem; }   /* room above a photo jumped to from the home page */
.gallery figure:target .ph { outline: 2px solid var(--fg); outline-offset: 4px; }
.gallery { columns: 2 22rem; column-gap: 1rem; }
.gallery figure { margin: 0 0 1rem; break-inside: avoid; }
figcaption { color: var(--muted); font-size: .9rem; padding-top: .35rem; }

/* child page cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1.5rem; margin-bottom: 3rem; }
.card { text-decoration: none; }
.card .ph { aspect-ratio: 3/2 !important; }
.card .ph img { height: 100%; object-fit: cover; }
.card h2 { font: 400 1.4rem var(--serif); margin: .6rem 0 .2rem; }
.card p { color: var(--muted); margin: 0; font-size: .95rem; }

.site-foot { max-width: var(--max); margin: 0 auto; padding: 2rem 1rem; color: var(--muted);
  border-top: 1px solid var(--line); font-size: .9rem; }

/* hide pieces a page leaves empty */
.subtitle:empty, .tagline:empty, .prose:empty { display: none; }

/* home page (templates/home.html) */
.home-intro { margin: 3rem 0 0; height: 600px; }
.tagline { font: 400 clamp(1.5rem, 4vw, 2.5rem)/1.2 var(--serif); margin: 0 0 1rem; max-width: 28em; }

/* photo viewer (static/viewer.js): a native <dialog> that turns the window black.
   The photo's size is set by viewer.js so it always fits, with a black margin
   around it and a single info line underneath. */
.viewer-open { overflow: hidden; }
.viewer { position: fixed; inset: 0; width: 100%; height: 100%;
  max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: #000; color: #fff; overflow: hidden; }
.viewer::backdrop { background: #000; }
.viewer-frame { position: absolute; inset: 0; background: #000; outline: none;
  display: flex; align-items: center; justify-content: center; }
.viewer-figure { margin: 0; max-width: 100%; }
.viewer-img { display: block; margin: 0 auto; }
.viewer-line { height: 2.5rem; padding: 0; display: flex; align-items: center; justify-content: center;
  gap: 1.5rem; color: #fff; font-size: .8rem; letter-spacing: .02em; white-space: nowrap; }
.viewer-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; opacity: .9; }
.viewer-count { opacity: .5; }

/* buttons and key tips: fade out when the mouse is still */
.viewer-controls { position: absolute; inset: 0; transition: opacity .4s; }
.viewer-frame.idle .viewer-controls { opacity: 0; }
.viewer-frame.idle { cursor: none; }
.viewer-btn { position: absolute; background: none; border: 0; color: #fff; opacity: .6;
  font: 300 2.5rem/1 var(--font); padding: .5rem 1rem; cursor: pointer; }
.viewer-btn:hover, .viewer-btn:focus-visible { opacity: 1; }
.viewer-btn:focus-visible { outline: 1px solid rgba(255, 255, 255, .5); outline-offset: -4px; }
.viewer-prev, .viewer-next { top: 50%; transform: translateY(-50%); font-size: 3.5rem; padding: 1rem .5rem; }
.viewer-prev { left: 0; }
.viewer-next { right: 0; }
.viewer-close { top: 0; right: 0; }
.viewer-full { top: .35rem; right: 3.25rem; font-size: 1.6rem; }
.viewer-keys { position: absolute; top: 1rem; left: 1.25rem; font-size: .8rem; opacity: .5; }
.viewer-keys kbd { font: inherit; border: 1px solid rgba(255, 255, 255, .5); border-radius: 3px;
  padding: 0 .35em; margin: 0 .15em; }
@media (hover: none) {  /* touch screens: swipe to browse */
  .viewer-keys, .viewer-full, .viewer-prev, .viewer-next { display: none; }
}

/* home carousel (static/carousel.js): full-width band of random photos in two rows */
body { overflow-x: clip; }  /* the band is 100vw wide; never scroll sideways */
.carousel { --h: clamp(360px, 75vh, 860px); --gap: 4px; height: var(--h); width: 100vw;
  margin: 0 0 2.5rem calc(50% - 50vw); display: flex; flex-direction: column; gap: var(--gap);
  overflow: hidden; }
.carousel-row { flex: 1; min-height: 0; overflow: hidden; }
.carousel-track { display: flex; height: 100%; will-change: transform; }
.carousel-item { flex: none; height: 100%; margin-right: var(--gap); background: var(--line); }
.carousel-item img { display: block; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.5s ease; }
.carousel-item img.loaded { opacity: 1; }
.carousel.still .carousel-row { overflow-x: auto; }  /* reduced motion: scroll by hand instead */

/* booking form (templates/contact.html) */
.contact { display: grid; gap: 1rem; max-width: 32rem; margin: 0 0 3rem; }
.contact label { display: grid; gap: .3rem; font-size: .9rem; color: var(--muted); }
.contact input, .contact select, .contact textarea { font: inherit; font-size: 1rem; color: var(--fg);
  background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: .55rem .7rem; }
.contact input:focus, .contact select:focus, .contact textarea:focus { outline: 2px solid var(--fg); outline-offset: -1px; }
.contact button { justify-self: start; font: inherit; padding: .6rem 1.6rem; border: 0; border-radius: 4px;
  background: var(--fg); color: var(--bg); cursor: pointer; }
.contact button:disabled { opacity: .5; cursor: wait; }
.contact-status { margin: 0; min-height: 1.6em; }
.contact-trap { position: absolute; left: -9999px; }  /* hidden from people, filled in by bots */

/* prototype 3D home (templates/home3d.html, static/home3d.js): the table fills the
   whole window behind everything, text sits on top in white, and the site header
   is pinned to the top. Nothing scrolls. (body:has(.table3d) = only this page) */
body:has(.table3d) { height: 100vh; height: 100dvh; overflow: hidden; background: #000; color: #fff; }
.table3d { position: fixed; inset: 0; z-index: 0; background: #000; overflow: hidden; }  /* edge falloff is done by the lens in home3d.js */
.table3d canvas { display: block; width: 100%; height: 100%; }
.table3d-msg { position: absolute; inset: auto 0 45%; text-align: center; color: #d8c8b4; margin: 0; }

/* white text over the table, bottom left; clicks pass through to the prints */
body:has(.table3d) .home-intro { position: fixed; bottom: 0; left: 0; z-index: 1; height: auto;
  margin: 0; padding: clamp(1.25rem, 4vw, 3rem); max-width: 40rem; pointer-events: none;
  text-shadow: 0 1px 12px rgba(0,0,0,.8); }
body:has(.table3d) .home-intro a { pointer-events: auto; color: #fff; }
body:has(.table3d) .tagline { color: #fff; }
body:has(.table3d) .prose { font-size: 0.7em; }

/* site header pinned to the top edge, on a dark fade so it stays readable */
body:has(.table3d) .site-head { position: fixed; left: 0; right: 0; top: 0; z-index: 2; max-width: none;
  margin: 0; padding: 1.1rem clamp(1rem, 3vw, 2rem) 2.5rem;
  background: linear-gradient(rgba(0,0,0,.75), transparent); }
body:has(.table3d) .logo, body:has(.table3d) .site-head nav a { color: rgba(255,255,255,.85); }
body:has(.table3d) .site-head nav a:hover { color: #fff; }
body:has(.table3d) .site-foot { display: none; }   /* no room, and nothing to scroll to */