/* ==========================================================================
   Chautauqua Resort — faithful rebuild of the original design.
   Vollkorn (serif) for headings + body, Roboto for nav, Barlow for labels.
   ========================================================================== */

/* --- self-hosted fonts -------------------------------------------------- */
@font-face{font-family:"Vollkorn";font-style:normal;font-weight:400 700;font-display:swap;src:url("/assets/fonts/vollkorn.woff2") format("woff2");}
@font-face{font-family:"Vollkorn";font-style:italic;font-weight:400;font-display:swap;src:url("/assets/fonts/vollkorn-400i.woff2") format("woff2");}
@font-face{font-family:"Roboto";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/roboto-400.woff2") format("woff2");}
@font-face{font-family:"Roboto";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/roboto-500.woff2") format("woff2");}
@font-face{font-family:"Roboto";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/roboto-700.woff2") format("woff2");}
@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/barlow-semi-condensed-500.woff2") format("woff2");}
@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/barlow-semi-condensed-600.woff2") format("woff2");}

/* --- design tokens ------------------------------------------------------ */
:root{
  --tan:#c39f7b;             /* heading + accent gold */
  --tan-dark:#b08a62;
  --navy:#0c1a2b;            /* booking "Check Availability" block */
  --ink:#00001c;            /* body text */
  --muted:#5a5a5a;
  --line:#e3ddd4;
  --bg:#ffffff;
  --sand:#efe9e2;            /* section background */
  --sand-deep:#e7dfd4;
  --bg-dark:#1f1d1b;         /* footer */

  --font-head:"Vollkorn",Georgia,"Times New Roman",serif;
  --font-body:"Vollkorn",Georgia,serif;
  --font-nav:"Roboto",-apple-system,BlinkMacSystemFont,sans-serif;
  --font-label:"Barlow Semi Condensed","Roboto",sans-serif;

  --container:1200px;
  --section-y:clamp(3rem,7vw,5.5rem);
  --radius:4px;
  --shadow:0 12px 34px rgba(0,0,0,.12);
  --ease:cubic-bezier(.4,0,.2,1);
}

/* --- base --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font-body);font-weight:400;color:var(--ink);background:var(--bg);
  line-height:1.7;font-size:17.5px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.nav-open{overflow:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--tan-dark);text-decoration:none;transition:color .2s var(--ease)}
a:hover{color:var(--ink)}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:600;color:var(--tan);line-height:1.18;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,4.4vw,2.9rem)}
h2{font-size:clamp(1.9rem,3.8vw,2.5rem)}
h3{font-size:clamp(1.25rem,2vw,1.5rem)}
p{margin:0 0 1.2em}
:focus-visible{outline:3px solid var(--tan);outline-offset:2px}

/* --- layout primitives -------------------------------------------------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem)}
.section{padding-block:var(--section-y);background:var(--sand)}
.section--white{background:var(--bg)}
.section--deep{background:var(--sand-deep)}
.section__head{max-width:760px;margin:0 auto clamp(2rem,4vw,3rem)}
.section__head--center{text-align:center}
.lede{font-size:1.3rem;color:var(--ink);line-height:1.55;font-weight:500}
.eyebrow{font-family:var(--font-label);font-weight:600;text-transform:uppercase;letter-spacing:.14em;
  font-size:.82rem;color:var(--tan-dark);display:block;margin-bottom:.7rem}
.grid{display:grid;gap:clamp(1.2rem,2.5vw,2rem)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}

/* --- buttons ------------------------------------------------------------ */
.btn{display:inline-block;font-family:var(--font-head);font-weight:600;font-size:1.05rem;
  padding:.7em 1.7em;border-radius:var(--radius);border:1px solid transparent;cursor:pointer;
  transition:all .2s var(--ease);text-align:center;line-height:1.25}
.btn--accent{background:var(--tan);color:#fff;border-color:var(--tan)}
.btn--accent:hover{background:var(--tan-dark);border-color:var(--tan-dark);color:#fff}
.btn--navy{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn--navy:hover{background:#13283f;color:#fff}
.btn--outline{background:transparent;color:var(--tan-dark);border-color:var(--tan)}
.btn--outline:hover{background:var(--tan);color:#fff}

/* ==========================================================================
   Header (two rows: top brand bar + nav bar)
   ========================================================================== */
.site-header{position:relative;z-index:60;background:#fff;border-bottom:1px solid var(--line)}
.header-top__inner{max-width:var(--container);margin-inline:auto;padding:.6rem clamp(1rem,4vw,2rem);
  display:flex;align-items:center;gap:1.5rem}
.brand{display:flex;align-items:center;gap:.7rem;color:var(--ink);flex:0 0 auto}
.brand__mark{height:58px;width:auto}
.brand__name{font-family:var(--font-body);font-weight:600;font-size:.95rem;line-height:1.15;color:#2b2b2b}
.announcement{flex:1 1 auto;text-align:center;font-family:var(--font-head);font-weight:600;
  font-size:clamp(1rem,1.8vw,1.5rem);color:var(--tan);line-height:1.25}
.announcement:hover{color:var(--tan-dark)}
.btn--book{flex:0 0 auto;background:var(--tan);color:#fff;font-family:var(--font-head);font-weight:600;
  font-size:1.2rem;line-height:1.05;padding:.7em 1.3em;border-radius:var(--radius);text-align:center}
.btn--book:hover{background:var(--tan-dark);color:#fff}

.header-nav{background:#fff;border-top:1px solid var(--line)}
.header-nav__inner{max-width:var(--container);margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem);
  display:flex;align-items:center;justify-content:space-between;gap:1rem}
.primary-nav{display:flex;align-items:center;justify-content:space-between;flex:1 1 auto;gap:1rem}
.primary-nav__list{display:flex;flex-wrap:wrap;align-items:center;gap:0;list-style:none;margin:0;padding:0}
.primary-nav__item{position:relative}
.primary-nav__link{display:block;font-family:var(--font-nav);font-weight:400;text-transform:uppercase;
  letter-spacing:.02em;font-size:.92rem;color:#2b2b2b;padding:1.1rem .85rem}
.primary-nav__item:first-child .primary-nav__link{color:var(--tan)}      /* Home active */
.primary-nav__link:hover{color:var(--tan)}
.has-sub>.primary-nav__link::after{content:"";display:inline-block;width:.42em;height:.42em;margin-left:.45em;
  border-right:2px solid var(--tan);border-bottom:2px solid var(--tan);transform:translateY(-.15em) rotate(45deg);transition:transform .18s var(--ease)}
.primary-nav__item.has-sub:hover>.primary-nav__link::after{transform:translateY(.05em) rotate(45deg)}
.subnav{position:absolute;top:100%;left:0;min-width:210px;background:#fff;border:1px solid var(--line);
  box-shadow:var(--shadow);list-style:none;margin:0;padding:.3rem 0;opacity:0;visibility:hidden;
  transform:translateY(6px);transition:all .18s var(--ease);z-index:70}
.primary-nav__item.has-sub:hover .subnav,.primary-nav__item.has-sub:focus-within .subnav{opacity:1;visibility:visible;transform:translateY(0)}
.subnav a{display:block;padding:.55rem 1.1rem;font-family:var(--font-nav);font-size:.88rem;text-transform:uppercase;color:#2b2b2b}
.subnav a:hover{background:var(--sand);color:var(--tan-dark)}
.header-social{display:flex;gap:.9rem;list-style:none;margin:0;padding:0;flex:0 0 auto}
.header-social a{font-family:var(--font-label);text-transform:uppercase;font-size:.78rem;letter-spacing:.08em;color:#2b2b2b}
.header-social a:hover{color:var(--tan)}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:1rem 8px;cursor:pointer}
.nav-toggle__bar{width:26px;height:2px;background:var(--ink);transition:.25s var(--ease)}

/* ==========================================================================
   Hero (full-bleed image, no text overlay — matches original)
   ========================================================================== */
.hero{position:relative;overflow:hidden}
.hero__slider{position:relative;height:clamp(360px,52vw,620px)}
.hero .slide{position:absolute;inset:0;opacity:0;transition:opacity 1.1s var(--ease)}
.hero .slide.is-active{opacity:1}
.hero .slide img{width:100%;height:100%;object-fit:cover}

/* --- booking card (overlaps hero bottom) -------------------------------- */
.booking{position:relative;z-index:20;margin-top:clamp(-70px,-5vw,-56px)}
.booking__card{display:flex;align-items:stretch;background:#fff;box-shadow:var(--shadow);border-radius:var(--radius);overflow:hidden}
.booking__field{flex:1 1 0;display:flex;flex-direction:column;justify-content:center;gap:.25rem;
  padding:1.1rem 1.3rem;border-right:1px solid var(--line)}
.booking__field label{font-family:var(--font-label);font-weight:600;text-transform:uppercase;
  letter-spacing:.1em;font-size:.72rem;color:var(--muted)}
.booking__field input,.booking__field select{font-family:var(--font-head);font-size:1.25rem;color:var(--ink);
  border:0;background:transparent;padding:.1rem 0;width:100%}
.booking__field select:focus,.booking__field input:focus{outline:none}
.booking__submit{flex:0 0 auto;border:0;cursor:pointer;background:var(--navy);color:#fff;
  font-family:var(--font-head);font-weight:600;font-size:1.1rem;text-transform:uppercase;letter-spacing:.06em;
  padding:0 2.2rem;min-width:200px}
.booking__submit:hover{background:#13283f}

/* ==========================================================================
   Content sections
   ========================================================================== */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.split--reverse .split__media{order:2}
.split__media img{width:100%;border-radius:var(--radius);box-shadow:var(--shadow)}
.split__body h2{margin-top:0}

/* cards (rooms / reviews / amenities) */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.card__media{aspect-ratio:4/3;overflow:hidden}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.card:hover .card__media img{transform:scale(1.04)}
.card__body{padding:1.4rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.card__body h3{margin:0;color:var(--tan)}
.card__body p{margin:0;color:var(--muted);font-size:1rem}
.card__link{margin-top:auto;font-family:var(--font-label);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:.84rem;color:var(--tan-dark)}
blockquote.card__body{font-style:italic;color:var(--ink)}
blockquote.card__body figcaption{font-style:normal}

/* prose (interior pages) */
.prose{max-width:820px;margin-inline:auto}
.prose h2,.prose h3{color:var(--tan)}
.prose h2{margin-top:1.5em;font-size:1.9rem}
.prose img{border-radius:var(--radius);margin:1.4rem 0;box-shadow:var(--shadow)}
.prose ul,.prose ol{margin:0 0 1.2em;padding-left:1.3em}
.prose li{margin-bottom:.4em}
.prose a{text-decoration:underline}

/* page hero band (interior) */
.page-hero{position:relative;color:#fff;text-align:center;padding:clamp(3.5rem,9vw,7rem) 1rem clamp(2.5rem,6vw,4.5rem);overflow:hidden}
.page-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.page-hero::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.42);z-index:1}
.page-hero__inner{position:relative;z-index:2}
.page-hero h1{color:#fff}
.page-hero__crumb{font-family:var(--font-label);text-transform:uppercase;letter-spacing:.14em;font-size:.82rem;opacity:.92;color:#fff}

/* contact */
.contact-form{display:flex;flex-direction:column;gap:1rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(1.5rem,3vw,2.5rem);box-shadow:var(--shadow)}
.contact-form__row{display:flex;flex-direction:column;gap:.4rem}
.contact-form label{font-family:var(--font-label);font-weight:600;text-transform:uppercase;letter-spacing:.06em;font-size:.74rem;color:var(--muted)}
.contact-form input,.contact-form textarea{font-family:var(--font-body);font-size:1rem;padding:.7em .8em;border:1px solid var(--line);border-radius:var(--radius);background:#fff;color:var(--ink);width:100%}
.contact-form textarea{resize:vertical}
.contact-form__status{margin:0;font-size:.95rem}
.contact-form__status.is-ok{color:#2e7d32}.contact-form__status.is-error{color:#c0392b}
.contact-map{width:100%;height:420px;border:0;display:block}

/* newsletter */
.newsletter{background:var(--sand-deep)}
.newsletter__form{display:flex;gap:.75rem;flex-wrap:wrap;max-width:520px;margin:1.2rem auto 0}
.newsletter__form input{flex:1 1 220px;font:inherit;font-size:1rem;padding:.75em .9em;border:1px solid var(--line);border-radius:var(--radius)}

/* gallery + blog */
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
.gallery-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius)}
.post-list{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,2rem)}
.post-meta{color:var(--muted);font-family:var(--font-label);text-transform:uppercase;letter-spacing:.06em;font-size:.82rem}
.owner-gate{max-width:460px;margin-inline:auto;text-align:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:clamp(2rem,4vw,3rem);box-shadow:var(--shadow)}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{background:var(--bg-dark);color:#cfc8bf}
.site-footer a{color:#cfc8bf}
.site-footer a:hover{color:var(--tan)}
.site-footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem;padding-block:clamp(3rem,6vw,4.5rem)}
.site-footer__logo{height:64px;width:auto;margin-bottom:1rem;filter:brightness(0) invert(1);opacity:.85}
.site-footer__tagline{color:#a59c90;max-width:32ch}
.site-footer__heading{font-family:var(--font-head);font-weight:600;font-size:1.25rem;color:var(--tan);margin-bottom:1rem}
.site-footer__links,.site-footer__social{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.site-footer__social{flex-direction:row;gap:1.2rem;margin-top:1.2rem}
.site-footer__address{font-style:normal;line-height:1.9;margin-bottom:1.2rem}
.site-footer__bar{border-top:1px solid rgba(255,255,255,.1);padding-block:1.3rem;font-size:.85rem;color:#8c8479}

/* --- utilities ---------------------------------------------------------- */
.text-center{text-align:center}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1080px){
  .announcement{font-size:1rem}
  .primary-nav__link{padding:1rem .6rem;font-size:.84rem}
}
@media (max-width:960px){
  .grid--4{grid-template-columns:repeat(2,1fr)}
  .grid--3,.post-list{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .split--reverse .split__media{order:0}
  .site-footer__grid{grid-template-columns:1fr 1fr}
  .booking__card{flex-wrap:wrap}
  .booking__field{flex:1 1 40%;border-bottom:1px solid var(--line)}
  .booking__submit{flex:1 1 100%;padding:1rem}
}
@media (max-width:760px){
  .header-top__inner{flex-wrap:wrap;gap:.6rem 1rem}
  .announcement{order:3;flex-basis:100%;text-align:left;font-size:.95rem}
  .nav-toggle{display:flex}
  .header-nav__inner{justify-content:flex-start}
  .primary-nav{position:fixed;inset:0 0 0 auto;width:min(85vw,340px);background:#fff;flex-direction:column;
    justify-content:flex-start;align-items:stretch;gap:0;padding:5rem 1.5rem 2rem;transform:translateX(100%);
    transition:transform .3s var(--ease);overflow-y:auto;box-shadow:var(--shadow);z-index:65}
  .primary-nav.is-open{transform:translateX(0)}
  .primary-nav__list{flex-direction:column;align-items:stretch;width:100%}
  .primary-nav__item{border-bottom:1px solid var(--line)}
  .primary-nav__link{padding:.9rem 0}
  .subnav{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 .5rem 1rem}
  .has-sub>.primary-nav__link::after{display:none}
  .header-social{padding:1.2rem 0}
  .grid--2,.grid--4{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .booking{margin-top:1.2rem}
  .booking__field{flex-basis:100%;border-right:0}
  .site-footer__grid{grid-template-columns:1fr;gap:2rem}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}
