/* Napa Valley Chateau Hotel - site.css
   Mobile-first. Brand tokens from the house style guide, section 71. */

:root {
  --nv-green: #22331F;
  --nv-green-hover: #2E4429;
  --nv-sage: #6C7F58;
  --nv-gold: #DCC9A3;
  --nv-ivory: #F6F3ED;
  --nv-wine: #6B1D2A;
  --nv-charcoal: #1A1A1A;
  --nv-soft-sage: #DDE5D6;
  --nv-soft-gold: #F0E6CF;
  --nv-stone: #E7E1D6;
  --nv-white: #FFFFFF;
  --nv-muted: #5A5A52;

  --nv-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --nv-font-body: "Lato", "Helvetica Neue", Arial, sans-serif;

  --nv-radius-sm: 8px;
  --nv-radius-md: 14px;
  --nv-radius-lg: 22px;
  --nv-radius-pill: 999px;

  --nv-shadow-card: 0 10px 30px rgba(26, 26, 26, .08);

  --nv-content: 75rem;
  --nv-prose: 46rem;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 80px; --s-10: 96px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--nv-ivory);
  color: var(--nv-charcoal);
  font-family: var(--nv-font-body);
  font-size: 1rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
  word-break: normal;
}

img, svg { max-width: 100%; height: auto; }
img { display: block; }

h1, h2, h3, h4 {
  font-family: var(--nv-font-display);
  color: var(--nv-green);
  line-height: 1.15;
  margin: 0 0 var(--s-4);
  font-weight: 700;
}
h1 { font-size: clamp(2rem, 5.2vw, 3.4rem); line-height: 1.06; letter-spacing: -.01em; }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.15rem); margin-top: var(--s-8); }
h3 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); margin-top: var(--s-6); font-weight: 600; }
h4 { font-size: 1.06rem; margin-top: var(--s-5); font-weight: 600; }
p  { margin: 0 0 var(--s-4); }

a { color: var(--nv-green); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--nv-wine); }
:focus-visible {
  outline: 3px solid var(--nv-wine);
  outline-offset: 2px;
  border-radius: 3px;
}

.container { width: min(100% - 2rem, var(--nv-content)); margin-inline: auto; }
.prose { max-width: var(--nv-prose); }
.prose p { font-size: 1.03rem; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--nv-green); color: #fff; padding: var(--s-3) var(--s-4);
  border-radius: 0 0 var(--nv-radius-sm) 0; text-decoration: none; font-weight: 700;
}
.skip-link:focus { left: 0; color: #fff; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------------------------------------------------------------- header */
.site-header {
  background: var(--nv-white);
  border-bottom: 1px solid var(--nv-stone);
  position: sticky; top: 0; z-index: 50;
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); min-height: 64px;
}
.logo { display: flex; align-items: center; text-decoration: none; padding: var(--s-2) 0; }
.logo img { width: 240px; height: auto; }
@media (max-width: 30rem) { .logo img { width: 190px; } }

.nav-toggle {
  display: inline-flex; align-items: center; gap: var(--s-2);
  background: none; border: 1px solid var(--nv-stone); border-radius: var(--nv-radius-sm);
  color: var(--nv-green); font-family: inherit; font-weight: 700; font-size: .88rem;
  padding: 10px 14px; cursor: pointer; min-height: 44px;
}
.nav-toggle:hover { background: var(--nv-ivory); }

.site-nav { display: none; }
.site-nav.is-open { display: block; }
/* Direct children only. The dropdown panels nest their own lists inside these
   items, and an unscoped selector would lay those out as a header row too. */
.site-nav > ul {
  list-style: none; margin: 0; padding: 0 0 var(--s-4);
  display: flex; flex-direction: column;
}
.site-nav > ul > li > a {
  display: block; padding: 13px 0; text-decoration: none; font-weight: 700;
  font-size: .95rem; border-bottom: 1px solid var(--nv-stone); color: var(--nv-green);
}
.site-nav a[aria-current="page"] { color: var(--nv-wine); }

/* Below the desktop breakpoint the panels are not shown: folded into the
   collapsed menu they would add thirty-two entries to a list of seven. The
   top-level link goes to the section hub, which lists the same pages. */
.nav-menu { display: none; }

@media (min-width: 62rem) {
  .nav-toggle { display: none; }
  .site-nav, .site-nav.is-open { display: block; }
  .site-nav > ul { flex-direction: row; gap: var(--s-5); padding: 0; align-items: center; }
  .site-nav > ul > li > a { border-bottom: 0; padding: var(--s-2) 0; font-size: .92rem; }
  .site-nav > ul > li > a:hover { color: var(--nv-wine); }

  .site-nav li.has-menu { position: relative; }
  /* Opened by hover and by focus-within, so the panel needs no script. It is
     kept in the layout with visibility rather than display:none, because a
     display:none panel cannot receive focus and the keyboard route would die
     at the section link. */
  .nav-menu {
    display: block; position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%) translateY(-4px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .12s ease, transform .12s ease, visibility .12s;
    padding-top: var(--s-3); z-index: 60;
  }
  .has-menu:hover > .nav-menu,
  .has-menu:focus-within > .nav-menu {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  .nav-menu-inner {
    display: flex; gap: var(--s-6);
    background: var(--nv-white); border: 1px solid var(--nv-stone);
    border-radius: var(--nv-radius-sm); padding: var(--s-4) var(--s-5);
    box-shadow: 0 12px 28px rgba(34, 51, 31, .13);
  }
  .nav-col ul { list-style: none; margin: 0; padding: 0; }
  .nav-col-h {
    margin: 0 0 var(--s-2); font-size: .72rem; letter-spacing: .08em;
    text-transform: uppercase; color: var(--nv-muted); font-weight: 700;
  }
  .nav-menu a {
    display: block; white-space: nowrap; padding: 7px 0; border-bottom: 0;
    font-size: .88rem; font-weight: 400; color: var(--nv-charcoal);
    text-decoration: none;
  }
  .nav-menu a:hover { color: var(--nv-wine); }
}
@media (max-width: 61.99rem) {
  .header-inner { flex-wrap: wrap; }
  .site-nav { flex-basis: 100%; }
}

/* --------------------------------------------------------------- breadcrumb */
.breadcrumb { font-size: .84rem; padding: var(--s-4) 0 0; color: var(--nv-muted); }
.breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumb li::after { content: "/"; margin-left: 6px; color: var(--nv-stone); }
.breadcrumb li:last-child::after { content: ""; }
.breadcrumb a { color: var(--nv-muted); }
.breadcrumb [aria-current="page"] { color: var(--nv-charcoal); }

/* -------------------------------------------------------------------- hero */
.hero { position: relative; background: var(--nv-green); color: var(--nv-white); overflow: hidden; }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: .5; }
.hero-inner { position: relative; padding: var(--s-8) 0 var(--s-7); }
.hero h1 { color: var(--nv-white); max-width: 20ch; }
.hero p { max-width: 56ch; font-size: 1.08rem; color: #EFEDE6; }
.hero .eyebrow { color: var(--nv-gold); }
@media (min-width: 48rem) { .hero-inner { padding: var(--s-10) 0 var(--s-9); } }

.eyebrow {
  font-size: .74rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--nv-sage); margin: 0 0 var(--s-3);
}

.page-head { padding: var(--s-5) 0 var(--s-2); }
.page-head .lede { font-size: 1.12rem; max-width: 62ch; color: #33332E; }

/* ------------------------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-family: var(--nv-font-body); font-weight: 700; font-size: .95rem; line-height: 1.2;
  padding: 14px 20px; border-radius: var(--nv-radius-sm); border: 1px solid transparent;
  text-decoration: none; cursor: pointer; min-height: 44px; text-align: center;
}
.btn-primary { background: var(--nv-green); color: var(--nv-white); }
.btn-primary:hover { background: var(--nv-green-hover); color: var(--nv-white); }
.btn-accent { background: var(--nv-gold); color: var(--nv-charcoal); }
.btn-accent:hover { background: #E7D8B8; color: var(--nv-charcoal); }
.btn-secondary { background: transparent; color: var(--nv-green); border-color: var(--nv-green); }
.btn-secondary:hover { background: var(--nv-soft-sage); color: var(--nv-green); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }

/* -------------------------------------------------------------------- cards */
.card-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-5); margin: var(--s-5) 0 0; }
@media (min-width: 46rem) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 70rem) { .card-grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.hotel-card {
  background: var(--nv-white); border: 1px solid var(--nv-stone);
  border-radius: var(--nv-radius-md); box-shadow: var(--nv-shadow-card);
  display: flex; flex-direction: column; overflow: hidden;
}
.hotel-card-head {
  background: var(--nv-green); color: var(--nv-white);
  padding: var(--s-4); display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3); position: relative;
}
.hotel-card-head::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("/assets/images/vineyard-lines.svg");
  background-size: 220px auto; background-repeat: repeat-x; background-position: right bottom;
  opacity: .25;
}
.hotel-card-mono {
  position: relative; font-family: var(--nv-font-display); font-size: 1.5rem;
  color: var(--nv-gold); line-height: 1; letter-spacing: .04em;
}
.hotel-card-cs {
  position: relative; text-align: right; font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--nv-gold);
}
.hotel-card-cs b { display: block; font-size: 1.32rem; letter-spacing: 0; color: var(--nv-white); }
.hotel-card-body { padding: var(--s-4); display: flex; flex-direction: column; flex: 1; }
.hotel-card-body h3 { margin: 0 0 var(--s-1); font-size: 1.16rem; }
.hotel-card-body h3 a { text-decoration: none; }
.hotel-card-body h3 a:hover { text-decoration: underline; }
.hotel-meta { font-size: .84rem; color: var(--nv-muted); margin: 0 0 var(--s-3); }
.hotel-card .btn-row { margin-top: auto; padding-top: var(--s-4); }

.score-line { display: flex; align-items: baseline; gap: var(--s-2); margin: 0 0 var(--s-3); }
.score-num {
  font-family: var(--nv-font-display); font-size: 1.5rem; font-weight: 700;
  color: var(--nv-green); line-height: 1;
}
.score-word { font-weight: 700; font-size: .88rem; color: var(--nv-charcoal); }
.score-count { font-size: .8rem; color: var(--nv-muted); }

.badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--s-3); padding: 0; list-style: none; }
.badge {
  display: inline-block; font-size: .73rem; font-weight: 700; letter-spacing: .02em;
  padding: 4px 11px; border-radius: var(--nv-radius-pill);
  background: var(--nv-soft-sage); color: #2C3A25; border: 1px solid #CBD8C2;
}
.badge-gold { background: var(--nv-soft-gold); color: #4A3B1E; border-color: #E2D2AC; }
.badge-plain { background: var(--nv-white); color: var(--nv-muted); border-color: var(--nv-stone); }

.bestfor, .goodtoknow {
  border-radius: var(--nv-radius-sm); padding: var(--s-3) var(--s-4); margin: 0 0 var(--s-3);
  font-size: .9rem;
}
.bestfor { background: var(--nv-soft-sage); }
.goodtoknow { background: var(--nv-soft-gold); }
.bestfor strong, .goodtoknow strong {
  display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--nv-green); margin-bottom: 3px;
}
.goodtoknow strong { color: #6A5320; }

/* -------------------------------------------------------------------- table */
.table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--nv-stone); border-radius: var(--nv-radius-md);
  background: var(--nv-white); margin: var(--s-5) 0;
}
table { border-collapse: collapse; width: 100%; font-size: .88rem; min-width: 44rem; }
caption { text-align: left; padding: var(--s-4) var(--s-4) 0; font-size: .84rem; color: var(--nv-muted); }
th, td { padding: 12px var(--s-4); text-align: left; border-bottom: 1px solid var(--nv-stone); vertical-align: top; }
thead th {
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--nv-green); background: var(--nv-ivory); white-space: nowrap;
}
tbody tr:last-child td { border-bottom: 0; }
td.num, th.num { text-align: right; white-space: nowrap; }
.table-wrap a { font-weight: 700; }

/* ------------------------------------------------------------------ panels */
.panel {
  background: var(--nv-white); border: 1px solid var(--nv-stone);
  border-radius: var(--nv-radius-lg); padding: var(--s-5); margin: var(--s-6) 0;
}
.panel h2, .panel h3 { margin-top: 0; }
.panel-sage { background: var(--nv-soft-sage); border-color: #CBD8C2; }
.panel-gold { background: var(--nv-soft-gold); border-color: #E2D2AC; }
.panel-green { background: var(--nv-green); border-color: var(--nv-green); color: var(--nv-white); }
.panel-green h2, .panel-green h3 { color: var(--nv-white); }
.panel-green a:not(.btn) { color: var(--nv-gold); }
.panel-green .btn-accent { color: var(--nv-charcoal); }
.panel-green .btn-primary { color: var(--nv-white); }

.criteria {
  list-style: none; margin: var(--s-5) 0 0; padding: 0;
  display: grid; gap: var(--s-4); counter-reset: crit;
}
@media (min-width: 46rem) { .criteria { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 70rem) { .criteria { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.criteria li {
  background: var(--nv-white); border: 1px solid #CBD8C2;
  border-radius: var(--nv-radius-md); padding: var(--s-4);
  font-size: .88rem; display: flex; flex-direction: column; gap: 5px;
}
.crit-step {
  font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--nv-sage);
}
.criteria b {
  font-family: var(--nv-font-display); font-size: 1.06rem; color: var(--nv-green);
  font-weight: 700; line-height: 1.25;
}
.criteria li > span:last-child { color: #33332E; }

.stat-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); margin: var(--s-5) 0; }
@media (min-width: 46rem) { .stat-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.stat {
  background: var(--nv-white); border: 1px solid var(--nv-stone);
  border-radius: var(--nv-radius-md); padding: var(--s-4); text-align: center;
}
.stat b { display: block; font-family: var(--nv-font-display); font-size: 1.9rem; color: var(--nv-green); line-height: 1.1; }
.stat span { font-size: .8rem; color: var(--nv-muted); }

.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
@media (min-width: 40rem) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); } }
.facts li {
  display: flex; justify-content: space-between; gap: var(--s-4);
  padding: 10px 0; border-bottom: 1px solid var(--nv-stone); font-size: .9rem;
}
.facts li span:first-child { color: var(--nv-muted); }
.facts li span:last-child { font-weight: 700; text-align: right; }

/* --------------------------------------------------------------------- faq */
.faq { margin: var(--s-5) 0; }
.faq details {
  background: var(--nv-white); border: 1px solid var(--nv-stone);
  border-radius: var(--nv-radius-sm); margin-bottom: var(--s-3); padding: 0;
}
.faq summary {
  cursor: pointer; padding: var(--s-4); font-weight: 700; font-family: var(--nv-font-display);
  font-size: 1.04rem; color: var(--nv-green); list-style: none; min-height: 44px;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.3rem; color: var(--nv-sage); flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq details > p { padding: 0 var(--s-4) var(--s-4); margin: 0; font-size: .95rem; }

/* ------------------------------------------------------------------ groups */
.linklist { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-3); }
@media (min-width: 46rem) { .linklist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 70rem) { .linklist.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.linklist a {
  display: block; background: var(--nv-white); border: 1px solid var(--nv-stone);
  border-radius: var(--nv-radius-sm); padding: var(--s-4); text-decoration: none;
  font-weight: 700; min-height: 44px;
}
.linklist a:hover { border-color: var(--nv-sage); background: var(--nv-soft-sage); }
.linklist a span { display: block; font-weight: 400; font-size: .84rem; color: var(--nv-muted); margin-top: 3px; }
/* ------------------------------------------------------------- schematics */
/* Inline SVG so the labels render in Lato and Playfair. An <img> to an
   external SVG cannot reach the document's fonts and falls back to Arial. */
.guide-diagram { display: block; width: 100%; height: auto; }

.card-figure {
  display: block; background: var(--nv-ivory);
  border: 1px solid var(--nv-stone); border-radius: var(--nv-radius-sm);
  padding: var(--s-2); margin-bottom: var(--s-3);
}
.linklist a:hover .card-figure { border-color: var(--nv-sage); }

.diagram-figure {
  margin: var(--s-6) 0 var(--s-7); max-width: 42rem;
  background: var(--nv-white); border: 1px solid var(--nv-stone);
  border-radius: var(--nv-radius-md); padding: var(--s-5);
}
.diagram-figure figcaption {
  margin-top: var(--s-4); padding-top: var(--s-3);
  border-top: 1px solid var(--nv-stone);
  font-size: .86rem; color: var(--nv-muted);
}

/* The figures on a section hub card. Printed from the dataset, so they are set
   apart from the blurb above them rather than folded into it. */
.hub-figures {
  margin-top: var(--s-3) !important; padding-top: var(--s-3);
  border-top: 1px solid var(--nv-stone);
  color: var(--nv-green) !important; font-weight: 700 !important; font-size: .8rem !important;
}

.updated {
  font-size: .82rem; color: var(--nv-muted); border-top: 1px solid var(--nv-stone);
  padding-top: var(--s-4); margin-top: var(--s-7);
}
.updated strong { color: var(--nv-charcoal); }

section { margin-bottom: var(--s-7); }
main { padding-bottom: var(--s-9); }

/* -------------------------------------------------------------------- form */
.form-field { margin-bottom: var(--s-4); max-width: 34rem; }
.form-field label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: 6px; }
.form-field input, .form-field textarea, .form-field select {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--nv-charcoal);
  background: var(--nv-white); border: 1px solid var(--nv-stone);
  border-radius: var(--nv-radius-sm); padding: 12px var(--s-3); min-height: 44px;
}
.form-field textarea { min-height: 9rem; resize: vertical; }
.form-hint { font-size: .82rem; color: var(--nv-muted); margin-top: 4px; }
.form-status { margin-top: var(--s-4); font-weight: 700; max-width: 34rem; }
.form-status[data-state="error"] { color: var(--nv-wine); }
.form-status[data-state="ok"] { color: var(--nv-green); }

/* ------------------------------------------------------------------ footer */
.site-footer { background: var(--nv-green); color: var(--nv-white); padding: var(--s-8) 0 var(--s-5); }
.site-footer h2 {
  color: var(--nv-gold); font-family: var(--nv-font-body); font-size: .76rem;
  letter-spacing: .13em; text-transform: uppercase; margin: 0 0 var(--s-4);
}
.footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-6); }
@media (min-width: 40rem) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .footer-grid { grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); } }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 9px; }
.site-footer a { color: #E6E9E2; text-decoration: none; font-size: .9rem; }
.site-footer a:hover { color: var(--nv-gold); text-decoration: underline; }
.footer-brand img { width: 210px; }
.footer-brand p { font-size: .88rem; color: #C9D1C4; margin-top: var(--s-4); max-width: 34ch; }
.footer-bottom {
  border-top: 1px solid #3A4C35; margin-top: var(--s-7); padding-top: var(--s-5);
  font-size: .82rem; color: #C9D1C4;
}
.footer-bottom p { margin: 0 0 var(--s-2); }

/* ---------------------------------------------------------------- 404 page */
.center-block { text-align: center; padding: var(--s-9) 0; }
.center-block .btn-row { justify-content: center; }

/* ------------------------------------------------------------ imagery */
.page-banner {
  border-radius: var(--nv-radius-lg); overflow: hidden; margin: var(--s-5) 0 var(--s-6);
  background: var(--nv-stone); border: 1px solid var(--nv-stone);
}
.page-banner img { width: 100%; height: auto; aspect-ratio: 8 / 3; object-fit: cover; }

.hotel-card-photo { position: relative; background: var(--nv-stone); }
.hotel-card-photo .hotel-photo {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block;
}
.hotel-card-score {
  position: absolute; right: var(--s-3); bottom: var(--s-3);
  background: rgba(34, 51, 31, .92); color: var(--nv-gold);
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 11px; border-radius: var(--nv-radius-sm); text-align: right;
  backdrop-filter: blur(2px);
}
.hotel-card-score b { display: block; font-size: 1.16rem; letter-spacing: 0; color: #fff; }

.hotel-lead {
  margin: 0 0 var(--s-6); border-radius: var(--nv-radius-lg); overflow: hidden;
  border: 1px solid var(--nv-stone); background: var(--nv-white);
}
.hotel-lead-img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 46rem) { .hotel-lead-img { aspect-ratio: 2 / 1; } }
.hotel-lead figcaption {
  font-size: .8rem; color: var(--nv-muted); padding: var(--s-3) var(--s-4);
}

/* ------------------------------------------------- table sort / filter */
.table-controls {
  display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: flex-end;
  background: var(--nv-white); border: 1px solid var(--nv-stone);
  border-radius: var(--nv-radius-md); padding: var(--s-4); margin: var(--s-5) 0 0;
}
.tc-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1 1 12rem; }
.tc-field label, .tc-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--nv-green);
}
.tc-field input[type="search"], .tc-field select {
  font-family: inherit; font-size: .92rem; color: var(--nv-charcoal);
  background: var(--nv-ivory); border: 1px solid var(--nv-stone);
  border-radius: var(--nv-radius-sm); padding: 10px var(--s-3); min-height: 44px;
  width: 100%;
}
.tc-checks { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.tc-checks label {
  display: inline-flex; align-items: center; gap: 6px; font-size: .88rem;
  font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--nv-charcoal);
  min-height: 44px; cursor: pointer;
}
.tc-checks input { width: 18px; height: 18px; accent-color: var(--nv-green); }
.tc-reset {
  font-family: inherit; font-weight: 700; font-size: .88rem; cursor: pointer;
  background: transparent; color: var(--nv-green); border: 1px solid var(--nv-green);
  border-radius: var(--nv-radius-sm); padding: 11px var(--s-4); min-height: 44px;
}
.tc-reset:hover { background: var(--nv-soft-sage); }
.tc-count {
  flex: 1 1 100%; margin: 0; font-size: .84rem; color: var(--nv-muted); font-weight: 700;
}
.table-controls + .table-wrap { margin-top: var(--s-3); }

.th-sort {
  display: inline-flex; align-items: center; gap: 5px; width: 100%;
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
  text-align: left;
}
.num .th-sort { justify-content: flex-end; }
.th-sort:hover { color: var(--nv-wine); }
.th-arrow { width: 8px; height: 8px; flex: none; opacity: .35; }
.th-arrow::after { content: "\2195"; font-size: .8rem; line-height: 1; }
th[aria-sort="ascending"] .th-arrow { opacity: 1; }
th[aria-sort="ascending"] .th-arrow::after { content: "\2191"; }
th[aria-sort="descending"] .th-arrow { opacity: 1; }
th[aria-sort="descending"] .th-arrow::after { content: "\2193"; }
th[aria-sort="ascending"], th[aria-sort="descending"] { background: var(--nv-soft-sage); }

.cmp-table tbody tr[hidden] { display: none; }
.cmp-table[data-empty="true"] tbody::after {
  content: "No hotels match these filters."; display: block;
  padding: var(--s-5) var(--s-4); color: var(--nv-muted); font-weight: 700;
}

/* Hotel page lead when no photo of the property could be retrieved. The
   caption states it is a view of the area, not the hotel. */
.hotel-lead-generic .hotel-lead-img { aspect-ratio: 8 / 3; }
.hotel-lead-generic figcaption { background: var(--nv-soft-gold); color: #6A5320; }

/* --------------------------------------------------------------- page hero */
.page-hero {
  /* The veil keeps white type legible over a photograph of any brightness.
     Scene backgrounds are appended to this file by build.py. */
  --hero-veil: linear-gradient(180deg, rgba(34,51,31,.62) 0%, rgba(34,51,31,.48) 45%,
                               rgba(34,51,31,.78) 100%);
  position: relative;
  background-color: var(--nv-green);
  background-size: cover;
  background-position: center;
  color: var(--nv-white);
}
.page-hero-inner { padding: var(--s-6) 0 var(--s-7); }
@media (min-width: 48rem) { .page-hero-inner { padding: var(--s-8) 0 var(--s-9); } }
.page-hero h1 { color: var(--nv-white); max-width: 22ch; margin-bottom: var(--s-4); }
.page-hero .eyebrow { color: var(--nv-gold); }
.hero-lede { max-width: 62ch; }
.hero-lede p { font-size: 1.08rem; color: #EFEDE6; margin: 0; }
.hero-credit {
  font-size: .78rem; color: #C9D1C4; margin: var(--s-5) 0 0; max-width: 62ch;
}
.page-hero .breadcrumb {
  padding: 0 0 var(--s-4); width: auto; color: #C9D1C4;
}
.page-hero .breadcrumb a { color: #C9D1C4; }
.page-hero .breadcrumb a:hover { color: var(--nv-gold); }
.page-hero .breadcrumb li::after { color: #6E7E68; }
.page-hero .breadcrumb [aria-current="page"] { color: var(--nv-white); }
.page-intro { margin-top: var(--s-6); }

/* --------------------------------------------------------------- logo text */
.logo { gap: 12px; color: var(--nv-green); }
.logo-mark { width: auto; height: 42px; flex: none; }
.logo-words { display: flex; flex-direction: column; gap: 3px; }
.logo-name {
  font-family: var(--nv-font-display); font-weight: 700; font-size: 1.22rem;
  letter-spacing: .09em; line-height: 1; text-transform: uppercase;
  color: var(--nv-green);
}
.logo-sub {
  font-family: var(--nv-font-body); font-weight: 700; font-size: .58rem;
  letter-spacing: .3em; line-height: 1; text-transform: uppercase;
  color: var(--nv-sage);
}
@media (max-width: 30rem) {
  .logo-mark { height: 34px; }
  .logo-name { font-size: 1rem; }
  .logo-sub { font-size: .52rem; letter-spacing: .24em; }
}
.logo-footer { color: var(--nv-gold); text-decoration: none; }
.logo-footer .logo-name { color: var(--nv-white); }
.logo-footer .logo-sub { color: var(--nv-gold); }

/* ---------------------------------------------------- hero scenes */
/* Generated by build.py from src/data/hero-images.json. */
.scene-cottage { background-image: var(--hero-veil), url("/assets/heroes/cottage-640.webp"); }
@media (min-resolution: 1.5dppx) and (max-width: 39.99rem) { .scene-cottage { background-image: var(--hero-veil), url("/assets/heroes/cottage-960.webp"); } }
@media (min-width: 40rem) { .scene-cottage { background-image: var(--hero-veil), url("/assets/heroes/cottage-1280.webp"); } }
@media (min-width: 80rem) { .scene-cottage { background-image: var(--hero-veil), url("/assets/heroes/cottage-1600.webp"); } }
.scene-downtown { background-image: var(--hero-veil), url("/assets/heroes/downtown-640.webp"); }
@media (min-resolution: 1.5dppx) and (max-width: 39.99rem) { .scene-downtown { background-image: var(--hero-veil), url("/assets/heroes/downtown-960.webp"); } }
@media (min-width: 40rem) { .scene-downtown { background-image: var(--hero-veil), url("/assets/heroes/downtown-1280.webp"); } }
@media (min-width: 80rem) { .scene-downtown { background-image: var(--hero-veil), url("/assets/heroes/downtown-1600.webp"); } }
.scene-grapes { background-image: var(--hero-veil), url("/assets/heroes/grapes-640.webp"); }
@media (min-resolution: 1.5dppx) and (max-width: 39.99rem) { .scene-grapes { background-image: var(--hero-veil), url("/assets/heroes/grapes-960.webp"); } }
@media (min-width: 40rem) { .scene-grapes { background-image: var(--hero-veil), url("/assets/heroes/grapes-1280.webp"); } }
@media (min-width: 80rem) { .scene-grapes { background-image: var(--hero-veil), url("/assets/heroes/grapes-1600.webp"); } }
.scene-hot-springs { background-image: var(--hero-veil), url("/assets/heroes/hot-springs-640.webp"); }
@media (min-resolution: 1.5dppx) and (max-width: 39.99rem) { .scene-hot-springs { background-image: var(--hero-veil), url("/assets/heroes/hot-springs-960.webp"); } }
@media (min-width: 40rem) { .scene-hot-springs { background-image: var(--hero-veil), url("/assets/heroes/hot-springs-1280.webp"); } }
@media (min-width: 80rem) { .scene-hot-springs { background-image: var(--hero-veil), url("/assets/heroes/hot-springs-1600.webp"); } }
.scene-interior { background-image: var(--hero-veil), url("/assets/heroes/interior-640.webp"); }
@media (min-resolution: 1.5dppx) and (max-width: 39.99rem) { .scene-interior { background-image: var(--hero-veil), url("/assets/heroes/interior-960.webp"); } }
@media (min-width: 40rem) { .scene-interior { background-image: var(--hero-veil), url("/assets/heroes/interior-1280.webp"); } }
@media (min-width: 80rem) { .scene-interior { background-image: var(--hero-veil), url("/assets/heroes/interior-1600.webp"); } }
.scene-pool { background-image: var(--hero-veil), url("/assets/heroes/pool-640.webp"); }
@media (min-resolution: 1.5dppx) and (max-width: 39.99rem) { .scene-pool { background-image: var(--hero-veil), url("/assets/heroes/pool-960.webp"); } }
@media (min-width: 40rem) { .scene-pool { background-image: var(--hero-veil), url("/assets/heroes/pool-1280.webp"); } }
@media (min-width: 80rem) { .scene-pool { background-image: var(--hero-veil), url("/assets/heroes/pool-1600.webp"); } }
.scene-valley { background-image: var(--hero-veil), url("/assets/heroes/valley-640.webp"); }
@media (min-resolution: 1.5dppx) and (max-width: 39.99rem) { .scene-valley { background-image: var(--hero-veil), url("/assets/heroes/valley-960.webp"); } }
@media (min-width: 40rem) { .scene-valley { background-image: var(--hero-veil), url("/assets/heroes/valley-1280.webp"); } }
@media (min-width: 80rem) { .scene-valley { background-image: var(--hero-veil), url("/assets/heroes/valley-1600.webp"); } }
.scene-village { background-image: var(--hero-veil), url("/assets/heroes/village-640.webp"); }
@media (min-resolution: 1.5dppx) and (max-width: 39.99rem) { .scene-village { background-image: var(--hero-veil), url("/assets/heroes/village-960.webp"); } }
@media (min-width: 40rem) { .scene-village { background-image: var(--hero-veil), url("/assets/heroes/village-1280.webp"); } }
@media (min-width: 80rem) { .scene-village { background-image: var(--hero-veil), url("/assets/heroes/village-1600.webp"); } }
.scene-vineyard { background-image: var(--hero-veil), url("/assets/heroes/vineyard-640.webp"); }
@media (min-resolution: 1.5dppx) and (max-width: 39.99rem) { .scene-vineyard { background-image: var(--hero-veil), url("/assets/heroes/vineyard-960.webp"); } }
@media (min-width: 40rem) { .scene-vineyard { background-image: var(--hero-veil), url("/assets/heroes/vineyard-1280.webp"); } }
@media (min-width: 80rem) { .scene-vineyard { background-image: var(--hero-veil), url("/assets/heroes/vineyard-1600.webp"); } }