/* ══════════════════════════════════════════════════════════════════════════
   Skyview Acres — homepage (option 1b, "Barn Board").
   Ports the approved design onto the "Classical" design system (styles.css),
   adds the prescriptive responsive rules from the handoff, and overrides the
   system accent to barn red at page scope.
   ══════════════════════════════════════════════════════════════════════ */

.sv {
  /* Barn red replaces the system's gold accent, at page scope. */
  --red: #9a2f27;
  --red-600: #7c241d;
  --color-accent: var(--red);   /* focus rings + selection follow the brand */
  --color-accent-2: var(--red);

  /* Dark ground used by nav / hero / closing bands. */
  --dark: #1c1918;

  /* Page gutter — the single lever the responsive rules turn. */
  --gutter: 56px;

  background: #e7e4de;
  color: var(--color-text);
  font-family: var(--font-body);
}

.sv a { color: var(--red-600); }
.sv a:hover { color: var(--red); }
.sv h1, .sv h2, .sv h3, .sv h4 { font-weight: 400; }

/* Kicker / eyebrow. */
.sv .kick {
  font-family: var(--font-body);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  font-feature-settings: "tnum"; margin: 0;
}

.sv .just { text-align: justify; hyphens: auto; }

/* Shared heading sizes reused outside the hero. */
.sv .h3 { font-size: 27px; line-height: 34px; margin: 0; }
.sv .h4 { font-size: 20px; line-height: 1.12; margin: 0 0 4px; }

/* Centered page column. */
.page {
  max-width: 1160px;
  margin: 0 auto;
  background: var(--color-bg);
}

/* ── Buttons on the dark / light grounds ──────────────────────────────── */
.sv .btn-primary { color: var(--red); border-color: var(--red); }
.sv .btn-primary:hover { background: color-mix(in srgb, var(--red) 10%, transparent); }
.sv .btn-primary:active { background: color-mix(in srgb, var(--red) 22%, transparent); }

.btn-outline-dark { color: #e8b3ad; border-color: #a8443c; }
.btn-outline-dark:hover { background: color-mix(in srgb, #9a2f27 10%, transparent); }
.btn-outline-light { color: #f3f2f2; border-color: rgba(243,242,242,.3); }
.btn-outline-light:hover { background: color-mix(in srgb, #f3f2f2 10%, transparent); }

/* Hero call-to-action pair — solid and high-contrast, fading to a
   semi-transparent state on hover (per client direction). */
.sv .btn-solid-red, .sv .btn-solid-light {
  font-weight: 600; letter-spacing: .01em;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.sv .btn-solid-red {
  color: #ffffff; background: var(--red); border-color: var(--red);
}
.sv .btn-solid-red:hover {
  background: color-mix(in srgb, var(--red) 58%, transparent);
  border-color: color-mix(in srgb, var(--red) 58%, transparent);
  color: #ffffff;
}
.sv .btn-solid-light {
  color: #1c1918; background: #f6f4f1; border-color: #f6f4f1;
}
.sv .btn-solid-light:hover {
  background: color-mix(in srgb, #f6f4f1 52%, transparent);
  border-color: color-mix(in srgb, #f6f4f1 52%, transparent);
  color: #ffffff;
}

.btn-split { justify-content: space-between; }

/* ── Nav bar ──────────────────────────────────────────────────────────── */
.nav-bar {
  background: var(--dark);
  color: #f3f2f2;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--gutter);
  border-bottom: 1px solid rgba(243,242,242,.14);
  position: sticky; top: 0; z-index: 20;
}
.wordmark {
  font-family: var(--font-body);
  font-size: 14px; letter-spacing: .32em; text-transform: uppercase;
  color: #f3f2f2;
}
.nav-links { display: flex; align-items: center; gap: 26px; }
.sv .navlink {
  font-family: var(--font-heading); font-size: 15px; text-decoration: none;
  color: #e5e0da; padding-bottom: 2px; border-bottom: 1px solid transparent;
}
.sv .navlink:hover { color: var(--red); border-bottom-color: var(--red); }

/* Hamburger — hidden until the nav collapses. */
.nav-toggle {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0;
  background: transparent; border: 1px solid rgba(243,242,242,.28);
  border-radius: var(--radius-md); cursor: pointer;
}
.nav-toggle-bar { display: block; width: 20px; height: 1.5px; margin: 0 auto; background: #f3f2f2; }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  background: var(--dark);
  color: #f3f2f2;
  padding: 78px var(--gutter) 96px;
  background-image:
    linear-gradient(100deg, rgba(28,25,24,.96) 0%, rgba(28,25,24,.82) 45%,
                            rgba(28,25,24,.55) 74%, rgba(28,25,24,.86) 100%),
    url('https://i0.wp.com/skyviewacresevents.com/wp-content/uploads/2024/11/IMG_2228-1024x768.jpg?ssl=1');
  background-size: cover, 158%;
  background-position: center, 8% 48%;
  background-repeat: no-repeat;
}
.hero-kick { color: #d79b94; margin-bottom: 26px; }
.hero-title {
  font-size: 88px; line-height: .98; letter-spacing: -.025em;
  margin: 0; color: #f6f3ee; max-width: 20ch;
}
.hero-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 48px; margin-top: 34px;
}
.hero-lede { max-width: 42ch; color: #bdb6ae; font-size: 16px; margin: 0; }
.hero-actions { display: flex; gap: 12px; flex: none; }
.hero-actions .btn { padding: 12px 20px; }
.ghost-year {
  position: absolute; right: var(--gutter); top: 52px;
  font-family: var(--font-heading); font-size: 150px; line-height: 1;
  color: rgba(232,179,173,.12); font-feature-settings: 'tnum';
  pointer-events: none;
}

/* ── Overlapping plate ────────────────────────────────────────────────── */
.plate-band { padding: 0 var(--gutter); margin-top: -56px; }
.plate.lap { width: 100%; height: 400px; object-fit: cover; position: relative; }

/* ── Three-up ─────────────────────────────────────────────────────────── */
.threeup {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  margin: 48px var(--gutter) 0;
  border-top: 1px solid var(--red);
}
.threeup-cell { padding: 22px 26px; }
.threeup-cell:first-child { padding-left: 0; }
.threeup-cell:last-child { padding-right: 0; }
.threeup-cell + .threeup-cell { border-left: 1px solid var(--color-divider); }
.threeup-body { margin: 0; font-size: 14px; color: var(--color-neutral-700); }

/* ── Nestled + mosaic ─────────────────────────────────────────────────── */
.nestled {
  padding: 56px var(--gutter);
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: start;
}
.nestled-title { font-size: 38px; margin: 0 0 8px; line-height: 1.12; }
.red-rule { width: 64px; height: 2px; background: var(--red); margin: 18px 0 22px; }
.nestled-body { font-size: 15.5px; color: var(--color-neutral-800); }
.mosaic {
  display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 190px; gap: 14px;
}
.mosaic img { width: 100%; height: 100%; object-fit: cover; }
.mosaic-tall { grid-row: span 2; }

/* ── Rental table ─────────────────────────────────────────────────────── */
.rental { padding: 0 var(--gutter) 56px; }
.rental-sub { font-size: 14px; color: var(--color-neutral-700); margin: 0 0 20px; }
.rental-table { font-size: 14.5px; }
.rental-table .col-item { width: 26%; }
.rental-table .col-notes { width: 18%; }

/* ── Testimonials ─────────────────────────────────────────────────────── */
.testimonials {
  background: var(--color-surface);
  border-top: 1px solid var(--color-divider);
  padding: 52px var(--gutter);
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
.testimonial { background: transparent; padding: 26px; margin: 0; }
.stars { color: var(--red); letter-spacing: .28em; font-size: 12px; margin-bottom: 12px; }
.testimonial-quote {
  font-family: var(--font-heading); font-size: 21px; line-height: 1.36;
  font-style: italic; margin: 0 0 14px;
}
.testimonial-cite { color: var(--color-neutral-700); font-style: normal; }

/* ── Closing band ─────────────────────────────────────────────────────── */
.closing {
  background: var(--dark); color: #f3f2f2;
  padding: 48px var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
}
.closing-kick { color: #d79b94; margin-bottom: 10px; }
.closing-title { font-size: 34px; margin: 0; color: #f6f3ee; }
.closing-btn { padding: 14px 22px; font-size: 15px; }

/* ══════════════════════════════════════════════════════════════════════════
   Responsive — prescriptive rules from the handoff (not mocked).
   ══════════════════════════════════════════════════════════════════════ */

/* Collapse the nav into a hamburger. */
@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--dark);
    border-bottom: 1px solid rgba(243,242,242,.14);
    padding: 8px var(--gutter) 20px;
    display: none;
  }
  .nav-links.is-open { display: flex; }
  .sv .navlink { padding: 14px 0; border-bottom: 1px solid rgba(243,242,242,.1); }
  .nav-links .btn { margin-top: 14px; justify-content: center; padding: 14px 20px; }
  .nav-bar { position: relative; }
}

@media (max-width: 900px) {
  .sv { --gutter: 28px; }
  .hero-title { font-size: clamp(38px, 9vw, 88px); }
  .plate-band { margin-top: -24px; }
  .plate.lap { height: 320px; }

  /* Hero copy stacks above full-width buttons. */
  .hero-row { flex-direction: column; align-items: stretch; gap: 24px; }
  .hero-lede { max-width: 52ch; }
  .hero-actions { flex-direction: row; }
  .hero-actions .btn { flex: 1; padding: 14px 20px; }

  /* Three-up → single column, dividers become top rules. */
  .threeup { grid-template-columns: 1fr; }
  .threeup-cell { padding: 22px 0; }
  .threeup-cell + .threeup-cell { border-left: 0; border-top: 1px solid var(--color-divider); }

  /* Nestled → single column; mosaic tightens. */
  .nestled { grid-template-columns: 1fr; gap: 32px; }
  .mosaic { grid-auto-rows: 140px; }
}

@media (max-width: 720px) {
  .ghost-year { display: none; }
}

@media (max-width: 640px) {
  .testimonials { grid-template-columns: 1fr; }
  .closing { flex-direction: column; align-items: stretch; text-align: left; }
  .closing-btn { justify-content: center; }
}

@media (max-width: 560px) {
  .sv { --gutter: 20px; }
  .plate-band { margin-top: 0; }
  .plate.lap { height: 240px; }
  .hero { padding: 56px var(--gutter) 64px; }
  .hero-actions { flex-direction: column; }

  /* Table stacks into definition blocks — no horizontal scroll. */
  .rental-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rental-table, .rental-table tbody, .rental-table tr, .rental-table td { display: block; width: auto; }
  .rental-table tr { border-top: 1px solid var(--color-divider); padding: 12px 0; }
  .rental-table tr:first-child { border-top: 0; }
  .rental-table td { border: 0; padding: 3px 0; }
  .rental-table td[data-label="Item"] {
    font-family: var(--font-heading); font-size: 18px; margin-bottom: 4px;
  }
  .rental-table td[data-label="Notes"] {
    font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--color-neutral-700); margin-top: 4px;
  }
}

/* Respect reduced motion — the design is print-like, but smooth-scroll opts out. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Interior pages (Gallery, Rental, Local Area, Vendors, Contact, Our Story).
   Shared header band + content rhythm on the paper ground.
   ══════════════════════════════════════════════════════════════════════ */

.sv .navlink[aria-current="page"] { color: var(--red); border-bottom-color: var(--red); }

/* Interior page header — a compact dark band echoing the hero. */
.page-head {
  background: var(--dark); color: #f3f2f2;
  padding: 64px var(--gutter) 56px;
}
.page-head .kick { color: #d79b94; margin-bottom: 16px; }
.page-head h1 {
  font-size: clamp(40px, 6vw, 64px); line-height: 1.02; letter-spacing: -.02em;
  margin: 0; color: #f6f3ee; max-width: 22ch;
}
.page-head .page-intro {
  margin: 20px 0 0; max-width: 60ch; color: #bdb6ae; font-size: 16px;
}

/* Content band on paper. */
.section { padding: 56px var(--gutter); }
.section + .section { padding-top: 0; }
.section-head { margin: 0 0 24px; }
.section-head h2 { font-size: 30px; margin: 0 0 6px; }
.section-head .kick { color: var(--red); }
.prose { max-width: 68ch; }
.prose p { font-size: 15.5px; color: var(--color-neutral-800); margin: 0 0 var(--space-3); }
.lead { font-size: 18px; color: var(--color-neutral-800); }

/* ── Gallery — CSS-columns masonry, no JS ─────────────────────────────── */
.gallery {
  columns: 3; column-gap: 14px;
  padding: 40px var(--gutter) 56px;
}
.gallery a { display: block; break-inside: avoid; margin: 0 0 14px; }
.gallery img { width: 100%; height: auto; }
.gallery .plate { margin: 0; }

/* ── Included list (Rental) ───────────────────────────────────────────── */
.include-list { list-style: none; margin: 0; padding: 0; max-width: 70ch; }
.include-list > li {
  padding: 14px 0; border-bottom: 1px solid var(--color-divider);
  font-size: 15.5px; color: var(--color-neutral-800);
}
.include-list > li:first-child { padding-top: 0; }
.include-list strong { font-family: var(--font-heading); font-weight: 600; font-size: 17px; color: var(--color-text); }
.include-list ul { margin: 8px 0 0; padding-left: 20px; font-size: 14.5px; color: var(--color-neutral-700); }
.note-line {
  margin-top: 20px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--red-600);
}
.rental-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: start; }
.rental-layout .plate { width: 100%; height: 100%; max-height: 640px; object-fit: cover; }

/* ── Local area cards ─────────────────────────────────────────────────── */
.card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.info-card { padding: 24px; }
.info-card h3 { font-size: 22px; margin: 0 0 8px; }
.info-card p { font-size: 14.5px; color: var(--color-neutral-700); margin: 0 0 14px; }
.link-row { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.link-row a {
  font-family: var(--font-heading); font-size: 15px; text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--red) 40%, transparent);
  padding-bottom: 1px;
}
.link-row a:hover { border-bottom-color: var(--red); }

/* ── Vendors ──────────────────────────────────────────────────────────── */
.vendor-cat { margin-bottom: 8px; }
.vendor-cat > .kick { color: var(--red); display: block; margin-bottom: 4px; }
.vendor-cat > h2 { font-size: 26px; margin: 0 0 20px; }
.vendor-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px;
}
.vendor {
  padding: 18px 20px; border: 1px solid var(--color-divider); border-radius: var(--radius-md);
  break-inside: avoid;
}
.vendor h3 { font-size: 18px; margin: 0 0 6px; }
.vendor p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--color-neutral-700); }
.vendor .role { font-style: italic; color: var(--color-neutral-600); }
.vendor a { text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--red) 35%, transparent); }
.vendor a:hover { border-bottom-color: var(--red); }
.vendor-note { max-width: 66ch; font-size: 15px; color: var(--color-neutral-700); margin: 0 0 8px; }

/* ── Contact ──────────────────────────────────────────────────────────── */
.contact-wrap { display: grid; grid-template-columns: 1fr .9fr; gap: 56px; align-items: start; }
.contact-cta .big-mail {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-heading); font-size: clamp(22px, 3vw, 30px);
  color: var(--red-600); text-decoration: none;
  border-bottom: 2px solid color-mix(in srgb, var(--red) 45%, transparent);
  padding-bottom: 4px; margin: 8px 0 24px;
}
.contact-cta .big-mail:hover { border-bottom-color: var(--red); }
.detail-list { list-style: none; margin: 0; padding: 0; }
.detail-list li { padding: 12px 0; border-bottom: 1px solid var(--color-divider); }
.detail-list li:first-child { padding-top: 0; }
.detail-list .k {
  display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--red); margin-bottom: 3px; font-family: var(--font-body);
}
.detail-list .v { font-size: 16px; color: var(--color-text); }

/* ── Interior responsive ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  .gallery { columns: 2; }
  .rental-layout { grid-template-columns: 1fr; gap: 28px; }
  .rental-layout .plate { max-height: 380px; }
  .contact-wrap { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 640px) {
  .card-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .gallery { columns: 1; }
}