/* An engraved invitation and painted service vignettes for the sage welcome. */
@font-face{
  font-family:"Cormorant Upright";
  src:url('assets/cormorant-upright-600-latin.woff2') format('woff2');
  font-weight:600;
  font-display:swap;
}
:root{--invitation-font:"Cormorant Upright",Cormorant,Georgia,serif}
.site-header nav{gap:clamp(18px,2.2vw,32px)}
.site-header nav>a:not(.button){
  display:inline-flex;align-items:center;min-height:44px;
  font:600 23px/1.2 var(--invitation-font);letter-spacing:.2px;white-space:nowrap;
}
.button.button-explore{
  position:relative;isolation:isolate;min-height:59px;
  padding:10px 12px 10px 29px;gap:27px;border-radius:999px;
  border:1px solid #b6a878;
  background:linear-gradient(115deg,#536b47,#344e37);
  box-shadow:0 3px 0 #243e2e,0 7px 16px #344d3314;
  font:600 25px/1.15 var(--invitation-font);letter-spacing:.15px;
  text-wrap:nowrap;
}
.button-explore:before{
  content:"";position:absolute;inset:4px;border:1px solid #e1d3a54d;
  border-radius:inherit;pointer-events:none;
}
.button-explore .button-arrow{
  display:grid;place-items:center;width:35px;height:35px;flex:none;
  border-radius:50%;background:#e6d7a91a;border:1px solid #e5d5a866;
}
.button-arrow svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.button.button-explore:hover{background:linear-gradient(115deg,#49623f,#294530);transform:translateY(-1px)}
.button.button-explore:active{transform:translateY(1px);box-shadow:0 1px 0 #243e2e}
.site-header .button-explore{
  min-height:51px;padding:8px 10px 8px 24px;gap:22px;
  font-size:22px;color:#274b36;
  border-color:#ead5a4;background:linear-gradient(110deg,#fff9e8,#f1e3bb);
  box-shadow:0 2px 0 #263f2c,0 5px 14px #1a32141c;
}
.site-header .button-explore:before{border-color:#b49b6152}
.site-header .button-explore .button-arrow{width:31px;height:31px;background:#4d6544;color:#fff9e8;border-color:#4d6544}
.site-header .button-explore:hover{background:linear-gradient(110deg,#fffdf4,#f7eccf)}
.hero-content .button-explore{min-width:287px;margin-block:10px 20px}

.service-section{
  background:radial-gradient(ellipse at 50% 0,#e2ead4 0,#d3dfc5 65%,#cbd9ba 100%);
  border-block:1px solid #afbf976b;padding-bottom:54px;
}
.service-section .section-intro{max-width:1100px;margin-bottom:25px}
.service-section .script{text-wrap:balance}
.service-section .section-intro p{color:#35523b}
.service-list{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1200px;margin-top:27px}
.service-list>div{
  display:grid;grid-template-columns:minmax(90px,115px) minmax(0,1fr);
  align-items:center;gap:12px;padding:0 20px;text-align:left;
  border-right:1px solid #91a27170;
}
.service-list>div:first-child{padding-left:0}
.service-list>div:last-child{padding-right:0;border-right:1px solid transparent}
/* Align the painted bases, not the transparent 384px image canvases.
   Visible alpha bounds end at y=373, 348, 320, 325 respectively. */
.service-list img{width:100%;aspect-ratio:1;object-fit:contain;transform:translateY(var(--service-baseline-shift,0%))}
.service-art-cooking{--service-baseline-shift:6.510417%}
.service-art-serving{--service-baseline-shift:13.802083%}
.service-art-cleanup{--service-baseline-shift:12.5%}
.service-list h3{font-family:var(--invitation-font);font-size:28px;margin-bottom:7px}
.service-list p{font-size:12px;color:#3d563b;line-height:1.55}
@media(min-width:701px) and (max-width:1100px){
  .site-header nav{gap:17px}
  .site-header nav>a:not(.button){font-size:21px}
  .site-header .button-explore{font-size:21px;gap:16px;padding-left:20px}
  .header-inner{gap:20px}
  .service-list>div{display:flex;flex-direction:column;gap:0;text-align:center;padding-inline:14px}
  .service-list img{width:124px;margin-bottom:6px}
  .service-list h3{font-size:27px}
}
@media(min-width:701px) and (max-width:850px){
  .site-header nav>a:not(.button){display:none}
}
@media(min-width:851px) and (max-width:1000px){
  .header-inner{width:calc(100% - 40px)}
  .site-header nav{gap:13px}
  .site-header nav>a:not(.button){font-size:20px}
  .site-header .button-explore{font-size:20px;padding-left:18px;gap:12px}
}
@media(max-width:700px){
  .site-header nav>a:not(.button){font-size:25px;min-height:44px}
  .site-header .button-explore{font-size:23px;gap:20px;min-height:54px}
  .hero-content .button-explore{font-size:24px;min-width:277px;max-width:100%;gap:22px;padding-left:25px;margin:10px 0 19px}
  .service-section{padding-top:39px;padding-bottom:34px}
  .service-section .section-intro{margin-bottom:20px}
  .service-list{width:calc(100% - 24px);margin-top:22px}
  .service-list>div{display:flex;flex-direction:column;gap:0;text-align:center;padding-inline:5px}
  .service-list>div:first-child{padding-left:5px}
  .service-list>div:last-child{padding-right:5px}
  .service-list img{width:100%;max-width:105px;margin-bottom:4px}
  .service-list h3{font-size:22px;margin:0;line-height:1.2}
}
@media(max-width:370px){
  .hero-content .button-explore{font-size:22px;min-width:260px;gap:18px;padding-left:23px}
  .service-list>div,.service-list>div:first-child,.service-list>div:last-child{padding-inline:3px}
  .service-list h3{font-size:19px}
}