/* Skaneateles Fields Resort & Spa — property landing page.
   Brand tokens centralised here so the other five Woodbine agents
   can re-skin by changing this one file. */

/* Approved Woodbine palette — these five, plus black and white, are the only
   colours on this page.

   The page field is LIGHT, and deliberately not Ashley Blue: Ashley Blue is the
   concierge widget's own colour, and a host page in the same blue makes the
   launcher card dissolve into the page it is supposed to sit on top of. The two
   Atlantic Deep bands (.dining, .footer) are the page's contrast breaks, and the
   light accents (Pearl Blue, Paloma) only ever appear ON those bands — on white
   they are 2.0:1 and 2.8:1. */
:root {
  --brand-pearl:    #b1b7be;
  --brand-ashley:   #8699ab; /* the widget's field — unused on this page ON PURPOSE */
  --brand-spruce:   #496b67;
  --brand-atlantic: #274f56;
  --brand-paloma:   #9e9b98;

  --heading:      var(--brand-atlantic);  /* section + card titles, 8.9:1 on white */
  --ink:          #000;                   /* body copy */
  --ink-soft:     var(--brand-spruce);    /* secondary copy + eyebrows, 5.8:1 */
  --line:         var(--brand-pearl);
  --bg-page:      #fff;
  /* The recessive half of the page's light/lighter alternation, and the fill
     behind the room + amenity cards. Replaces the old warm cream; a Pearl tint
     over white rather than flat Pearl Blue, which at full strength drops Blue
     Spruce to 2.9:1 and would cost the secondary ink. */
  --bg-tint:      rgba(177, 183, 190, 0.3);
  --shadow-soft:  0 10px 30px rgba(39, 79, 86, 0.08);
  --shadow-strong:0 24px 64px rgba(39, 79, 86, 0.18);
  --serif:        "Cormorant Garamond", "Playfair Display", Georgia, serif;
  --sans:         "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: var(--bg-page); color: var(--ink); font-family: var(--sans); line-height: 1.6; }
a { color: var(--heading); text-decoration: none; }
img { max-width: 100%; display: block; }

/* ── Topnav ───────────────────────────────────────────────── */
.topnav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.topnav-inner {
  max-width: 1240px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 28px;
}
.brand {
  display: flex; align-items: center; gap: 14px; color: var(--ink);
}
.brand-mark {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--brand-atlantic); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 18px;
}
.brand-text { font-family: var(--serif); font-size: 22px; font-weight: 600; letter-spacing: 0.5px; }
.brand-sub  { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: var(--ink-soft); margin-top: -2px; }
.topnav-links { display: flex; gap: 28px; align-items: center; }
.topnav-links a { color: var(--ink); font-size: 14px; font-weight: 500; transition: color 0.2s; }
.topnav-links a:hover { color: var(--brand-atlantic); }
.nav-cta {
  padding: 10px 22px; background: var(--brand-atlantic); color: #fff !important;
  border-radius: 999px; font-size: 13px !important; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1.5px;
  transition: background 0.2s;
}
.nav-cta:hover { background: #000; }

/* ── Hero ─────────────────────────────────────────────────── */
.hero {
  /* z-index:0 makes this a stacking context, which is what CONTAINS the
     z-index:-1 ::before below. Without it that pseudo-element escapes to the
     root stacking context and the body's own opaque background paints straight
     over the hero photo — the image loaded (200 OK) and simply never showed.
     Pre-existing, but it only became obvious once the page field went white:
     with no photo behind it, this white text was landing on white. */
  position: relative; z-index: 0;
  min-height: 92vh; display: flex; align-items: center; justify-content: center;
  color: #fff; text-align: center; overflow: hidden;
}
.hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(39,79,86,0.55) 0%, rgba(39,79,86,0.80) 45%, rgba(39,79,86,0.92) 100%),
              url("https://images.unsplash.com/photo-1505228395891-9a51e7e86bf6?auto=format&fit=crop&w=2000&q=80") center/cover no-repeat;
  z-index: -1;
}
.hero-eyebrow {
  font-size: 12px; letter-spacing: 6px; text-transform: uppercase;
  color: #fff; margin-bottom: 18px;
}
.hero h1 {
  font-family: var(--serif); font-weight: 500; font-size: clamp(38px, 6vw, 78px);
  line-height: 1.05; max-width: 980px; padding: 0 20px;
}
.hero h1 em { font-style: italic; color: rgba(255, 255, 255, 0.82); }
.hero-tagline {
  margin-top: 22px; font-size: 17px; color: rgba(255, 255, 255, 0.92);
  max-width: 700px; padding: 0 24px;
}
.hero-ctas { margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.btn {
  display: inline-block; padding: 14px 28px; border-radius: 999px;
  font-size: 13px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase;
  transition: transform 0.2s, background 0.2s; cursor: pointer; border: none;
}
.btn-primary { background: var(--brand-paloma); color: #000 !important; }
.btn-primary:hover { background: var(--brand-pearl); transform: translateY(-1px); }
.btn-ghost { background: transparent; color: #fff !important; border: 1px solid rgba(255,255,255,0.6); }
.btn-ghost:hover { background: rgba(255,255,255,0.12); }
.hero-scroll { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,0.7); }

/* ── Sections ─────────────────────────────────────────────── */
section { padding: 96px 28px; }
.container { max-width: 1240px; margin: 0 auto; }
.section-eyebrow { font-size: 11px; letter-spacing: 5px; text-transform: uppercase; color: var(--ink-soft); }
.section-title  { font-family: var(--serif); font-size: clamp(30px, 4vw, 48px); font-weight: 500; line-height: 1.15; color: var(--heading); margin-top: 10px; }
.section-lead   { font-size: 17px; color: var(--ink-soft); max-width: 720px; margin-top: 16px; line-height: 1.7; }

/* Overview */
.overview { background: var(--bg-tint); }
.overview-grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center;
}
.overview-grid img { border-radius: 4px; box-shadow: var(--shadow-strong); }
.stat-row { margin-top: 36px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; border-top: 1px solid var(--line); padding-top: 28px; }
.stat-row .stat-num { font-family: var(--serif); font-size: 36px; color: var(--heading); }
.stat-row .stat-lbl { font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--ink-soft); margin-top: 4px; }

/* Rooms */
.rooms { background: var(--bg-page); }
.rooms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 28px; margin-top: 48px; }
.room-card {
  background: var(--bg-tint); border: 1px solid var(--line); border-radius: 4px; overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s; display: flex; flex-direction: column;
}
.room-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }
.room-card-img { width: 100%; height: 220px; object-fit: cover; background: var(--line); }
.room-card-body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.room-card-name { font-family: var(--serif); font-size: 22px; color: var(--heading); }
.room-card-meta { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--ink-soft); margin-top: 4px; }
.room-card-summary { font-size: 14px; color: var(--ink); margin-top: 14px; flex: 1; }
.room-card-cta { margin-top: 18px; font-size: 13px; font-weight: 600; color: var(--heading); }
.room-card-cta::after { content: " →"; transition: margin-left 0.2s; }
.room-card:hover .room-card-cta::after { margin-left: 4px; }

/* Dining */
.dining { background: var(--brand-atlantic); color: #fff; position: relative; overflow: hidden; }
.dining .section-eyebrow { color: var(--brand-pearl); }
.dining .section-title { color: #fff; }
.dining .section-lead { color: rgba(255,255,255,0.85); }
.dining-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; margin-top: 56px; }
.dining-art { border-radius: 4px; overflow: hidden; box-shadow: var(--shadow-strong); }
.dining-art img { width: 100%; height: 480px; object-fit: cover; }
.dining-info h3 { font-family: var(--serif); font-size: 36px; font-weight: 500; color: #fff; }
.dining-info .restaurant-name { color: var(--brand-pearl); }
.dining-info p { color: rgba(255,255,255,0.85); margin-top: 16px; font-size: 15px; }
.dining-meta { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.dining-meta dt { font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--brand-pearl); }
.dining-meta dd { font-size: 15px; margin-top: 4px; color: #fff; }
.dining-actions { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }

/* Spa */
.spa { background: var(--bg-tint); }
.spa-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 64px; align-items: center; margin-top: 56px; }
.spa-image img { border-radius: 4px; box-shadow: var(--shadow-strong); width: 100%; height: 520px; object-fit: cover; }
.spa-services {
  margin-top: 32px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0;
  border-top: 1px solid var(--line);
}
.spa-service { padding: 20px 0; border-bottom: 1px solid var(--line); }
.spa-service:nth-child(odd) { padding-right: 16px; }
.spa-service:nth-child(even) { padding-left: 16px; }
.spa-service-name { font-family: var(--serif); font-size: 18px; color: var(--heading); }
.spa-service-detail { font-size: 13px; color: var(--ink-soft); margin-top: 4px; }

/* Amenities */
.amenities { background: var(--bg-page); }
.amenities-grid {
  margin-top: 56px; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px;
}
.amenity-card {
  padding: 28px; border: 1px solid var(--line); border-radius: 4px; background: var(--bg-tint);
  transition: border-color 0.2s, transform 0.2s;
}
.amenity-card:hover { border-color: var(--brand-atlantic); transform: translateY(-2px); }
.amenity-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--brand-atlantic); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.amenity-name { font-family: var(--serif); font-size: 19px; color: var(--heading); margin-top: 16px; }
.amenity-detail { font-size: 14px; color: var(--ink); margin-top: 8px; }

/* Location */
.location { background: var(--bg-tint); }
.location-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; margin-top: 48px; align-items: center; }
.location-list dt { font-family: var(--serif); font-size: 18px; color: var(--heading); margin-top: 18px; }
.location-list dd { font-size: 14px; color: var(--ink-soft); margin-top: 4px; }
.location-art img { border-radius: 4px; box-shadow: var(--shadow-strong); width: 100%; height: 460px; object-fit: cover; }

/* Footer */
.footer {
  background: var(--brand-atlantic); color: #fff; padding: 64px 28px 32px;
}
.footer-inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; }
.footer h4 { font-family: var(--serif); font-size: 18px; color: #fff; margin-bottom: 14px; }
.footer p, .footer a, .footer li { color: rgba(255,255,255,0.75); font-size: 13px; line-height: 1.8; }
.footer a:hover { color: var(--brand-pearl); }
.footer ul { list-style: none; }
.footer-bottom {
  max-width: 1240px; margin: 48px auto 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.18);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 14px;
  font-size: 12px; color: rgba(255,255,255,0.6);
}

/* Responsive */
@media (max-width: 920px) {
  .topnav-links { display: none; }
  .topnav-links .nav-cta { display: inline-block; }
  .overview-grid, .dining-grid, .spa-grid, .location-grid { grid-template-columns: 1fr; gap: 36px; }
  .dining-art img, .spa-image img, .location-art img { height: 320px; }
  section { padding: 64px 22px; }
}