:root{
  --ink:#211814;
  --paper:#f4ecdf;
  --cream:#fff8ec;
  --wine:#4b181a;
  --wine2:#2e1011;
  --terracotta:#9a3f2c;
  --terracotta-dark:#82321f;
  --gold:#c9a35a;
  --gold-soft:#f0d8a8;
  --gold-dim:#9b6734;
  --line:rgba(33,24,20,.14);
  --white:#fff8ec;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{text-decoration:none;color:inherit}
img{display:block;width:100%;height:100%;object-fit:cover}

/* Header */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:10;
  display:flex;align-items:center;gap:26px;
  justify-content:space-between;
  padding:18px clamp(18px,4vw,60px);
  color:var(--white);
  background:linear-gradient(180deg,rgba(20,12,10,.80),rgba(20,12,10,.20),transparent);
}
.brand{display:grid;grid-template-columns:40px auto;grid-template-rows:auto auto;column-gap:12px;align-items:center}
.brand span{
  grid-row:1/3;display:grid;place-items:center;
  width:40px;height:40px;
  border:1px solid var(--gold);border-radius:50%;
  font-family:'Cormorant Garamond',serif;font-size:18px;
  color:var(--gold);letter-spacing:.02em;
}
.brand strong{
  font-family:'Cormorant Garamond',serif;
  font-size:23px;font-weight:600;line-height:1;
  letter-spacing:.01em;
}
.brand small{
  font-size:10.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;
  opacity:.78;
}

nav{display:flex;gap:26px;margin-left:auto;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.16em}
nav a{padding:6px 0;transition:color .2s ease}
nav a:hover{color:var(--gold)}

.nav-cta,.button{
  display:inline-flex;min-height:44px;align-items:center;justify-content:center;
  border-radius:999px;padding:10px 20px;
  font-family:'Inter',sans-serif;font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  border:1px solid rgba(255,248,236,.55);
  transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
  cursor:pointer;
}
.nav-cta,.button.primary{
  background:var(--terracotta);border-color:var(--terracotta);color:var(--white);
}
.nav-cta:hover,.button.primary:hover{background:var(--terracotta-dark);border-color:var(--terracotta-dark)}
.button.ghost{background:rgba(0,0,0,.22);color:var(--white)}
.button.ghost:hover{background:rgba(0,0,0,.36)}
.button.light{background:transparent;color:var(--white)}
.button.light:hover{background:rgba(255,248,236,.08)}

/* Hero */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:120px clamp(20px,5vw,72px) 0;
  color:var(--white);
  background:url("assets/01-terrace-lake.jpg") center/cover no-repeat;
  overflow:hidden;
}
.shade{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(18,10,8,.72),rgba(18,10,8,.34) 50%,rgba(18,10,8,.10) 78%,transparent),
    linear-gradient(180deg,transparent 40%,rgba(12,7,6,.78) 100%);
}
.hero-copy{
  position:relative;
  max-width:640px;
  margin-bottom:42px;
}
.eyebrow{
  margin:0 0 18px;
  display:inline-flex;align-items:center;gap:10px;
  color:var(--gold);
  font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.24em;
}
.eyebrow i{opacity:.55;font-style:normal;font-size:12px}
.dark{color:var(--gold-dim)}
.gold{color:var(--gold)}

h1,h2,h3,p{margin-top:0}
h1,h2,h3{
  font-family:'Cormorant Garamond','Georgia',serif;
  font-weight:600;line-height:1.14;letter-spacing:.005em;
}
h1{
  max-width:640px;margin-bottom:20px;
  font-size:clamp(30px,4vw,46px);
  font-weight:600;
  text-shadow:0 1px 24px rgba(0,0,0,.28);
}
h1 em{font-style:italic;font-weight:500;color:var(--gold-soft)}
h2{
  margin-bottom:16px;
  font-size:clamp(26px,3vw,38px);
  font-weight:600;
}
h3{font-size:22px;margin-bottom:6px;font-weight:600}

.hero p{
  max-width:520px;
  color:rgba(255,248,236,.90);
  font-size:clamp(15px,1.25vw,17px);
  line-height:1.7;
  text-shadow:0 1px 14px rgba(0,0,0,.28);
}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}

.hero-meta{
  position:relative;
  display:flex;align-items:center;flex-wrap:wrap;gap:12px;
  padding:20px 0 24px;
  border-top:1px solid rgba(255,248,236,.18);
  color:rgba(255,248,236,.74);
  font-size:11px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
}
.hero-meta i{opacity:.45;font-style:normal}

/* Sections */
.intro,.menu,.visit{padding:clamp(60px,7vw,100px) clamp(20px,5vw,72px)}
.intro{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(30px,6vw,80px);align-items:start;
  background:var(--cream);
  border-bottom:1px solid var(--line);
}
.intro-lead h2{max-width:440px;margin-bottom:0}
.intro-body p{font-size:17px;color:rgba(33,24,20,.78);line-height:1.75;margin-bottom:0}
.intro-note{
  margin-top:22px !important;padding-top:20px;
  border-top:1px solid var(--line);
  font-size:12px !important;color:var(--gold-dim) !important;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  line-height:1.7 !important;
}

.section-head{max-width:640px;margin-bottom:40px}
.section-head h2{margin-bottom:10px}
.section-sub{color:rgba(33,24,20,.68);font-size:16px;margin:0}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cards article{
  overflow:hidden;
  border:1px solid var(--line);border-radius:10px;
  background:var(--cream);
  transition:transform .3s ease, box-shadow .3s ease;
}
.cards article:hover{transform:translateY(-3px);box-shadow:0 16px 36px -22px rgba(33,24,20,.32)}
.card-media{aspect-ratio:4/5;overflow:hidden}
.card-media img{transition:transform .6s ease}
.cards article:hover .card-media img{transform:scale(1.04)}
.card-body{padding:22px 22px 26px}
.card-body span{
  display:block;margin-bottom:10px;
  color:var(--gold-dim);
  font-size:10.5px;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;
}
.card-body h3{margin-bottom:8px;font-size:22px;line-height:1.15}
.card-body p{margin:0;color:rgba(33,24,20,.70);font-size:15px;line-height:1.65}

/* Gallery */
.gallery{
  display:grid;grid-template-columns:1.4fr 1fr;gap:2px;
  background:var(--paper);
  border-block:1px solid var(--line);
}
.gallery figure{margin:0;aspect-ratio:3/2;overflow:hidden}
.gallery-lead{aspect-ratio:3/2}

/* Visit */
.visit{
  display:grid;grid-template-columns:1fr 400px;
  gap:56px;align-items:start;
  background:var(--wine);color:var(--white);
}
.visit-copy h2{max-width:460px}
.visit-copy p{color:rgba(255,248,236,.80);font-size:16px;max-width:440px}
aside{
  padding:32px;
  border:1px solid rgba(255,248,236,.18);
  border-radius:10px;
  background:rgba(255,248,236,.06);
}
aside .eyebrow{margin-bottom:14px}
aside h3{color:var(--white);font-size:22px;margin-bottom:6px}
aside p{color:rgba(255,248,236,.78);margin-bottom:22px;font-size:15px}
aside .actions{margin-top:0;gap:10px}
aside .button{flex:1 1 auto;min-width:110px}

/* Footer */
footer{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:26px clamp(20px,5vw,72px) 40px;
  background:var(--wine2);
  color:rgba(255,248,236,.62);
  font-size:12px;letter-spacing:.06em;
}

/* Mobile actions bar */
.mobile-actions{
  position:fixed;left:12px;right:12px;bottom:12px;z-index:20;
  display:none;grid-template-columns:repeat(3,1fr);
  overflow:hidden;border-radius:12px;
  background:rgba(46,16,17,.94);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  box-shadow:0 14px 30px -12px rgba(0,0,0,.5);
}
.mobile-actions a{
  padding:14px 8px;color:var(--white);
  font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;text-align:center;
}
.mobile-actions a+a{border-left:1px solid rgba(255,255,255,.14)}

/* Tablet */
@media(max-width:960px){
  .cards{grid-template-columns:1fr 1fr}
  .cards article:last-child{grid-column:1 / -1}
  .cards article:last-child .card-media{aspect-ratio:16/9}
  .visit{grid-template-columns:1fr;gap:36px}
  aside{max-width:520px}
}

/* Mobile */
@media(max-width:760px){
  nav{display:none}
  .nav-cta{font-size:11px;min-height:40px;padding:8px 16px}
  .brand small{display:none}
  .brand{grid-template-columns:38px auto;grid-template-rows:1fr}
  .brand span{grid-row:1;width:38px;height:38px}
  .brand strong{grid-row:1;align-self:center}
  .hero{min-height:94svh;padding:100px 20px 0;background-position:50% 40%}
  .hero-copy{margin-bottom:30px}
  .hero-meta{gap:8px;font-size:10.5px;letter-spacing:.14em;padding:16px 0 22px}
  h1{font-size:32px;max-width:none}
  h2{font-size:26px}
  .intro{grid-template-columns:1fr;gap:22px}
  .intro-body p{font-size:16px}
  .cards{grid-template-columns:1fr;gap:16px}
  .cards article:last-child{grid-column:auto}
  .cards article:last-child .card-media{aspect-ratio:4/5}
  .card-media{aspect-ratio:16/10}
  .gallery{grid-template-columns:1fr;gap:2px}
  .gallery figure,.gallery-lead{aspect-ratio:4/3}
  footer{flex-direction:column;gap:6px;padding-bottom:100px}
  .mobile-actions{display:grid}
}

@media(max-width:430px){
  body{font-size:15px}
  .site-header{padding:14px 16px;gap:14px}
  .brand strong{font-size:19px}
  .brand span{width:36px;height:36px;font-size:16px}
  .hero{padding:96px 18px 0}
  .hero p{font-size:15px}
  .hero .actions{width:100%}
  .hero .button{flex:1 1 auto;min-width:0;padding:10px 14px}
  .actions{gap:10px}
  .intro,.menu,.visit{padding:54px 18px}
  aside{padding:24px}
  aside .actions{flex-direction:column}
  aside .button{width:100%}
  h1{font-size:30px}
  h2{font-size:24px}
  h3{font-size:20px}
}