/* DiineOut one-screen notice, hand-written CSS */

@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300 700;font-display:swap;src:url(/assets/fonts/cormorant-garamond-variable.d80df8ff.woff2) format("woff2")}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300 700;font-display:swap;src:url(/assets/fonts/cormorant-garamond-italic-variable.e48e5802.woff2) format("woff2")}
@font-face{font-family:"Proza Libre";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/proza-libre-400.1efb90a2.woff2) format("woff2")}
@font-face{font-family:"Proza Libre";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/proza-libre-600.e7baaab4.woff2) format("woff2")}

:root{
  --burgundy:#AE2445;
  --burgundy-dark:#8F1C38;
  --accent:#E2446A;
  --cream:#FFFBF6;
  --ink:#160203;
  --grey-300:#DDDDDD;
  --white:#FFFFFF;
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --sans:"Proza Libre","Segoe UI",Arial,sans-serif;
  --radius:4px;
  --container:1320px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);font-size:1rem;line-height:1.7;color:var(--ink);background:var(--ink)}
img{display:block;max-width:100%}
a{color:inherit}
p{margin:0}
ul{margin:0;padding:0;list-style:none}
h1{margin:0;font-family:var(--serif);font-weight:500;line-height:1.14;letter-spacing:-0.005em}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 40px}
@media (max-width:1023px){.container{padding:0 28px}}
@media (max-width:599px){.container{padding:0 20px}}

a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Page shell: one viewport tall, photograph behind everything */
.page{
  display:flex;
  flex-direction:column;
  min-height:100vh;
  min-height:100svh;
  position:relative;
  background-color:var(--ink);
  background-image:url(/assets/img/hero-wine-pour.c08e5d08.jpg);
  background-size:cover;
  background-position:72% center;
  background-repeat:no-repeat;
  color:var(--white);
}
.page::before{content:"";position:absolute;inset:0;background:rgba(22,2,3,0.62)}
.masthead,.hero,.site-footer{position:relative;z-index:1}

/* Masthead: logo only, no navigation */
.masthead{flex:none;background:var(--white);border-bottom:1px solid var(--grey-300);padding:14px 0}
.masthead .container{display:flex;align-items:center}
.masthead img{width:auto;height:48px}
@media (max-width:599px){.masthead{padding:11px 0}.masthead img{height:34px}}

.hero{flex:1;display:flex;align-items:center;padding:clamp(16px,3vh,40px) 0}

/* Content column: half the page on desktop, full width on tablet and phone */
.hero-content{width:100%}
@media (min-width:1025px){.hero-content{width:50%}}

.eyebrow{font-size:0.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:0.16em;color:rgba(255,255,255,0.84)}
h1{margin-top:clamp(10px,1.5vh,18px);font-size:clamp(2rem,3.4vw,3rem);color:var(--white)}
.subline{margin-top:clamp(10px,1.5vh,16px);font-family:var(--serif);font-size:clamp(1.1875rem,1.5vw,1.5rem);line-height:1.4;color:rgba(255,255,255,0.92)}

.note{margin-top:clamp(16px,2.6vh,30px);padding-left:18px;border-left:2px solid var(--burgundy)}
.note p{font-size:clamp(1rem,1.15vw,1.125rem);line-height:1.7;color:rgba(255,255,255,0.9)}
.note p + p{margin-top:0.7em}
.note .sig{margin-top:16px;font-family:var(--serif);font-style:italic;font-size:1.3125rem;color:var(--white)}
.sig span{display:block;font-family:var(--sans);font-style:normal;font-size:0.8125rem;letter-spacing:0.04em;color:rgba(255,255,255,0.7)}

.services-lead{margin-top:clamp(16px,2.6vh,30px);font-size:0.8125rem;font-weight:600;text-transform:uppercase;letter-spacing:0.16em;color:rgba(255,255,255,0.7)}
.services{margin-top:12px;display:grid;grid-template-columns:repeat(2,1fr);gap:12px clamp(16px,2vw,32px)}
.services li{border-top:1px solid rgba(255,255,255,0.34);padding-top:10px;font-family:var(--serif);font-size:clamp(1rem,1.2vw,1.1875rem);line-height:1.3;color:var(--white)}

.actions{margin-top:clamp(18px,3vh,34px)}
.btn{
  display:inline-block;
  font-family:var(--serif);
  font-size:1.1875rem;
  font-weight:500;
  padding:13px 32px;
  border-radius:var(--radius);
  text-decoration:none;
  background:var(--burgundy);
  color:var(--white);
  transition:background-color 150ms ease,color 150ms ease,border-color 150ms ease;
}
.btn:hover{background:var(--burgundy-dark)}

.site-footer{flex:none;padding-bottom:clamp(12px,2vh,20px);font-size:0.8125rem;line-height:1.6;color:rgba(255,255,255,0.72)}
.site-footer a{color:inherit;text-decoration:underline}
.site-footer a:hover{color:var(--white)}

/* 404 */
.hero.is-404 h1{font-size:clamp(1.875rem,3vw,2.625rem)}

/* Short screens: tighten the rhythm so the page still lands in one viewport */
@media (max-height:800px){
  .masthead{padding:10px 0}
  .masthead img{height:38px}
  .hero{padding:14px 0}
  h1{font-size:clamp(1.75rem,2.9vw,2.5rem)}
  .subline{font-size:clamp(1.0625rem,1.3vw,1.25rem);line-height:1.35}
  .note{margin-top:14px;padding-left:16px}
  .note p{font-size:clamp(0.9375rem,1vw,1rem);line-height:1.6}
  .note .sig{margin-top:12px;font-size:1.1875rem}
  .services-lead{margin-top:14px}
  .services{margin-top:10px;gap:10px 20px}
  .services li{padding-top:8px;font-size:clamp(0.9375rem,1.05vw,1.0625rem)}
  .actions{margin-top:16px}
  .btn{padding:11px 26px;font-size:1.0625rem}
  .site-footer{padding-bottom:10px}
}

/* Very short screens, mostly laptops at 768px physical height */
@media (max-height:700px){
  .masthead{padding:8px 0}
  .masthead img{height:32px}
  .hero{padding:10px 0}
  h1{font-size:clamp(1.625rem,2.6vw,2.125rem)}
  .subline{font-size:1rem;line-height:1.3}
  .note{margin-top:12px}
  .note p{font-size:0.9375rem;line-height:1.55}
  .note p + p{margin-top:0.55em}
  .note .sig{margin-top:10px;font-size:1.0625rem}
  .services-lead{margin-top:12px}
  .services{margin-top:8px;gap:8px 20px}
  .services li{padding-top:7px;font-size:1rem}
  .actions{margin-top:14px}
  .btn{padding:10px 24px;font-size:1rem}
  .site-footer{padding-bottom:8px}
}

/* Landscape phones: let the page grow rather than clip content */
@media (max-height:520px){
  .page{min-height:0}
  .hero{padding:28px 0}
}