/*
Theme Name: Saltline Stays
Author: Barron AI Solutions
Text Domain: saltline
*/

/* DESIGN_IDENTITY
   Saltline — a Gulf film still, not a postcard collage, not an Airbnb grid
   1. canvas: full-bleed tide photo, sand only after the fold
   2. type: Bricolage Grotesque + Source Serif 4
   3. hero: 100vh cinematic still, copy in the lower third, booking dock
   4. rhythm: horizontal house reel, then full-bleed coast chapters
   5. motion: still-parallax, reel drag, chapter ken-burns
   6. accent: copper stamp on a dark film overlay
*/

:root {
  --sand: #e4d1b2;
  --foam: #f4ece0;
  --ink: #1c2a24;
  --mute: #5c675f;
  --tide: #1c6b66;
  --tide-deep: #0e3f3c;
  --copper: #c4783a;
  --rule: #c9b48e;
  --well: min(1200px, calc(100% - 48px));
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--sand);
  color: var(--ink);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 18px;
  line-height: 1.5;
}
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
}
.skip { position: absolute; left: -999px; }
.skip:focus { left: 8px; top: 8px; background: #fff; padding: 8px; z-index: 20; }

.mast {
  background: var(--ink);
  color: var(--foam);
}
.mast-inner {
  width: var(--well);
  margin: 0 auto;
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.wordmark {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 700;
  letter-spacing: -0.05em;
  text-decoration: none;
  font-size: 1.28rem;
  white-space: nowrap;
}
.wordmark em {
  font-family: "Source Serif 4", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  margin-left: 0.22em;
  opacity: 0.92;
}
.mast-nav {
  display: flex;
  margin-left: auto;
  align-items: center;
  gap: 22px;
}
.mast-nav a {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 0.95rem;
  text-decoration: none;
  opacity: 0.9;
}
.mast-nav a:hover { opacity: 1; color: var(--sand); }
.stamp {
  font-family: "Bricolage Grotesque", sans-serif;
  text-decoration: none;
  background: var(--copper);
  color: var(--foam);
  padding: 9px 15px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}
.stamp:hover { background: #d18644; }

.film {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 320px);
  gap: 32px 48px;
  align-items: end;
  width: 100%;
  min-height: 560px;
  padding: 48px max(24px, calc((100% - 1152px) / 2)) 40px;
  color: var(--foam);
  background:
    linear-gradient(90deg, rgba(14,20,18,0.5) 0%, rgba(14,20,18,0.14) 58%, rgba(14,20,18,0.28) 100%),
    url("images/gulf-hero.jpg") center / cover no-repeat;
}
.film-place {
  font-family: "Bricolage Grotesque", sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.72rem;
  margin: 0 0 12px;
  opacity: 0.85;
}
.film-text h1 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(2.6rem, 6.2vw, 5.2rem);
  line-height: 0.9;
  letter-spacing: -0.05em;
  font-weight: 700;
  margin: 0 0 14px;
  max-width: 12ch;
  text-shadow: 0 12px 36px rgba(0,0,0,0.4);
}
.film-lede {
  max-width: 32rem;
  margin: 0;
  font-size: 1.08rem;
  color: rgba(244,236,224,0.9);
}
.dock {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--foam);
  color: var(--ink);
  padding: 22px 22px 18px;
  box-shadow: 0 28px 56px rgba(14,20,18,0.38);
}
.dock-kicker {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin: 0 0 4px;
  color: var(--tide);
}
.dock label {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dock input {
  font: inherit;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: transparent;
  padding: 6px 0;
}
.dock button {
  font-family: "Bricolage Grotesque", sans-serif;
  background: var(--copper);
  color: var(--foam);
  border: 0;
  min-height: 46px;
  cursor: pointer;
  letter-spacing: 0.02em;
  font-size: 0.95rem;
  margin-top: 4px;
}
.dock button:hover { background: #d18644; }

.scatter {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(64px, 8.2vw);
  gap: 10px;
  width: min(1400px, calc(100% - 24px));
  margin: 18px auto 12px;
  position: relative;
  z-index: 4;
}
.scatter img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: 0 22px 48px rgba(14,20,18,0.32);
  filter: saturate(1.14) contrast(1.1);
  transition: transform 420ms ease, filter 420ms ease, z-index 0s;
}
.scatter img:hover {
  transform: scale(1.07) rotate(0deg) !important;
  z-index: 6;
  filter: saturate(1.22) contrast(1.14);
}
.scatter img:nth-child(1) { grid-column: 1 / 6; grid-row: 1 / 6; transform: rotate(-1.6deg); }
.scatter img:nth-child(2) { grid-column: 6 / 10; grid-row: 1 / 4; transform: rotate(2.1deg); }
.scatter img:nth-child(3) { grid-column: 10 / 13; grid-row: 1 / 5; transform: rotate(-2.2deg); }
.scatter img:nth-child(4) { grid-column: 6 / 9; grid-row: 4 / 7; }
.scatter img:nth-child(5) { grid-column: 9 / 13; grid-row: 5 / 8; transform: rotate(1.4deg); }
.scatter img:nth-child(6) { grid-column: 1 / 4; grid-row: 6 / 9; transform: rotate(-2.4deg); }
.scatter img:nth-child(7) { grid-column: 4 / 8; grid-row: 7 / 10; }
.scatter img:nth-child(8) { grid-column: 8 / 11; grid-row: 8 / 11; transform: rotate(1.8deg); }
.scatter img:nth-child(9) { grid-column: 11 / 13; grid-row: 8 / 11; }
.scatter img:nth-child(10) { grid-column: 1 / 5; grid-row: 9 / 12; transform: rotate(-1deg); }
.pop-gallery {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 22vh;
  gap: 8px;
  width: min(1400px, calc(100% - 24px));
  margin: -28px auto 24px;
  position: relative;
  z-index: 3;
}
.pop-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.12) contrast(1.08);
  box-shadow: 0 16px 32px rgba(0,0,0,0.22);
  transition: transform 400ms ease;
}
.pop-gallery img:nth-child(1) { grid-column: 1 / 4; grid-row: 1 / 3; }
.pop-gallery img:nth-child(2) { grid-column: 4 / 7; }
.pop-gallery img:nth-child(3) { grid-column: 4 / 6; grid-row: 2 / 4; }
.pop-gallery img:nth-child(4) { grid-column: 6 / 7; grid-row: 2 / 4; }
.pop-gallery img:nth-child(5) { grid-column: 1 / 3; grid-row: 3 / 5; }
.pop-gallery img:nth-child(6) { grid-column: 3 / 7; grid-row: 4 / 5; }
.pop-gallery img:hover { transform: scale(1.04); z-index: 2; }
.guest-photo {
  width: min(420px, 70vw);
  height: 50vh;
  object-fit: cover;
  margin: 0 auto 28px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.4);
  transform: rotate(-2deg);
}
.reel { padding: 64px 0 40px; }
.reel-head {
  width: var(--well);
  margin: 0 auto 20px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
}
.reel-head h2, .stay-body h1, .page h1, .ribbon h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.04em;
  margin: 0;
}
.reel-head p { margin: 0; color: var(--mute); }
.reel-track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding: 8px calc((100vw - min(1200px, 100vw - 48px)) / 2) 36px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.reel-card {
  flex: 0 0 min(78vw, 520px);
  scroll-snap-align: start;
  display: grid;
  color: var(--foam);
  text-decoration: none;
  overflow: hidden;
  min-height: 62vh;
}
.reel-card img {
  grid-area: 1 / 1;
  width: 100%;
  height: 62vh;
  object-fit: cover;
  transition: transform 800ms ease;
}
.reel-card:hover img { transform: scale(1.06); }
.reel-meta {
  grid-area: 1 / 1;
  align-self: end;
  padding: 28px 22px;
  background: linear-gradient(to top, rgba(14,20,18,0.82), transparent);
}
.reel-meta h3 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 1.8rem;
  margin: 0 0 4px;
  letter-spacing: -0.03em;
}

.chapters { }
.chapter {
  display: grid;
  min-height: 72vh;
  color: var(--foam);
  text-decoration: none;
  overflow: hidden;
}
.chapter img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  min-height: 72vh;
  object-fit: cover;
  transition: transform 1.2s ease;
}
.chapter:hover img { transform: scale(1.05); }
.chapter div {
  grid-area: 1 / 1;
  align-self: end;
  width: var(--well);
  margin: 0 auto;
  padding: 0 0 48px;
  text-shadow: 0 10px 30px rgba(0,0,0,0.45);
}
.chapter span {
  font-family: "Bricolage Grotesque", sans-serif;
  letter-spacing: 0.2em;
  font-size: 0.75rem;
}
.chapter h2 {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: clamp(2.8rem, 8vw, 6rem);
  margin: 6px 0 0;
  letter-spacing: -0.05em;
}
.chapter::after {
  content: "";
  grid-area: 1 / 1;
  background: linear-gradient(to top, rgba(14,20,18,0.65), transparent 50%);
}

.guestbook {
  min-height: 70vh;
  display: grid;
  place-items: center;
  padding: 80px 24px;
  background:
    linear-gradient(180deg, rgba(14,63,60,0.92), rgba(14,20,18,0.94)),
    url("images/interior.jpg") center/cover;
  color: var(--foam);
  text-align: center;
}
.guestbook blockquote {
  font-family: "Source Serif 4", serif;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1.25;
  max-width: 22ch;
  margin: 0 auto 20px;
  font-style: italic;
}
.guestbook cite {
  font-family: "Bricolage Grotesque", sans-serif;
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.75rem;
  display: block;
}
.ghost {
  display: inline-block;
  margin-top: 28px;
  font-family: "Bricolage Grotesque", sans-serif;
  border-bottom: 1px solid currentColor;
  text-decoration: none;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
}

.stay-hero { position: relative; overflow: hidden; max-height: 72vh; }
.stay-hero img { width: 100%; height: 72vh; object-fit: cover; }
.stay-body {
  width: var(--well);
  margin: 32px auto 64px;
  display: grid;
  gap: 32px;
}
@media (min-width: 900px) {
  .stay-body { grid-template-columns: 1fr 340px; }
}
.facts { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.facts li {
  font-family: "Bricolage Grotesque", sans-serif;
  border: 1px solid var(--rule);
  padding: 6px 10px;
  background: var(--foam);
}
.amenities { columns: 2; }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal b, .cal button {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 0.75rem;
  text-align: center;
}
.cal button {
  border: 0;
  background: var(--foam);
  padding: 10px 0;
  cursor: pointer;
  position: relative;
}
.cal button[disabled] { color: #aaa; }
.cal button.on { color: var(--foam); background: var(--tide); }
.price-card {
  background: var(--foam);
  padding: 18px;
  position: sticky;
  top: 16px;
  box-shadow: 0 20px 40px rgba(28,42,36,0.12);
}
.price-card dl { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; }
.err { color: #8a1f12; }
.ok { background: var(--tide); color: var(--foam); padding: 12px; }

.page, .ribbon, .block {
  width: var(--well);
  margin: 36px auto 72px;
}
.page form, .page dl { max-width: 36rem; }
.field { margin-bottom: 12px; }
.field input, .field textarea, .ticket input, .ticket select {
  width: 100%;
  font: inherit;
  padding: 8px;
  border: 1px solid var(--rule);
}
.hp { position: absolute; left: -9999px; }
.btn {
  font-family: "Bricolage Grotesque", sans-serif;
  background: var(--ink);
  color: var(--foam);
  border: 0;
  padding: 12px 16px;
  text-decoration: none;
  display: inline-block;
  cursor: pointer;
}
.houses { display: flex; gap: 16px; overflow-x: auto; }
.house {
  min-width: min(78vw, 340px);
  background: var(--foam);
  text-decoration: none;
  color: inherit;
}
.house img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.house h3 { font-family: "Bricolage Grotesque", sans-serif; margin: 10px 10px 4px; }
.house p { margin: 0 10px 12px; color: var(--mute); font-size: 0.95rem; }

.shore {
  background: var(--ink);
  color: var(--foam);
  padding: 48px 0 28px;
}
.shore a { color: var(--sand); }
.shore-inner {
  width: var(--well);
  margin: 0 auto;
  display: grid;
  gap: 20px;
}
@media (min-width: 800px) { .shore-inner { grid-template-columns: 1.4fr 1fr 1fr; } }
.shore-inner > div a { display: block; margin-bottom: 6px; }
.list-form button {
  margin-top: 8px;
  font-family: "Bricolage Grotesque", sans-serif;
  background: var(--copper);
  color: var(--foam);
  border: 0;
  padding: 8px 12px;
}
.bas-credit { padding: 16px; text-align: center; }
.bas-credit a { color: inherit; opacity: 0.55; text-decoration: none; }

@media (max-width: 800px) {
  .film {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 32px 20px 28px;
  }
  .film-text h1 { font-size: clamp(2.4rem, 11vw, 3.4rem); }
  .mast-inner { flex-wrap: wrap; gap: 10px 16px; }
  .mast-nav {
    flex-basis: 100%;
    justify-content: flex-start;
    gap: 16px;
    order: 3;
    padding-bottom: 8px;
  }
  .home .stamp { display: none; }
  .amenities { columns: 1; }
  .scatter { grid-auto-rows: 16vw; }
  .pop-gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 22vh; }
  .pop-gallery img { grid-column: auto !important; grid-row: auto !important; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}