:root{
  --designer-site-nav-height:76px;
  --paper:#efe9dd;
  --paper-deep:#e6decf;
  --ink:#f1eadf;
  --ink-soft:#aaa197;
  --oxblood:#742a2a;
  --gold:#c9a36c;
  --display:"EB Garamond",Georgia,"Times New Roman",serif;
  --ui:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.7,0,.2,1);
}

html:not(.estienne-designer-embedded) body{
  display:grid !important;
  grid-template-rows:var(--designer-site-nav-height) minmax(0,1fr);
  min-height:100dvh;
  overflow:hidden;
}

.designer-site-nav.topbar{
  position:relative;
  z-index:80;
  display:flex;
  align-items:center;
  gap:clamp(18px,3vw,34px);
  min-height:var(--designer-site-nav-height);
  padding:16px clamp(20px,5vw,60px);
  border-bottom:1px solid rgba(239,233,221,.11);
  background:rgba(11,10,9,.96);
  color:#f1eadf;
}

.designer-site-nav .wordmark{
  padding-right:.34em;
  color:#f1eadf;
  font:500 clamp(1.15rem,2vw,1.5rem)/1 var(--display);
  letter-spacing:.34em;
  text-decoration:none;
  text-transform:uppercase;
}

.designer-site-nav .menu{position:relative}
.designer-site-nav .menu-toggle{
  display:inline-flex;
  align-items:center;
  gap:.5em;
  padding:.3em 0;
  border:0;
  background:none;
  color:#aaa197;
  font:500 .74rem/1 var(--ui);
  letter-spacing:.22em;
  text-transform:uppercase;
}
.designer-site-nav .menu-toggle:hover{color:#f1eadf}
.designer-site-nav .menu-toggle .caret{
  width:6px;
  height:6px;
  border-right:1.4px solid currentColor;
  border-bottom:1.4px solid currentColor;
  transform:rotate(45deg) translateY(-1px);
  transition:transform .3s var(--ease);
}
.designer-site-nav .menu-toggle[aria-expanded="true"] .caret{transform:rotate(-135deg) translateY(-1px)}
.designer-site-nav .menu-panel a{color:#f1eadf;text-decoration:none;font:500 1.05rem/1.2 var(--display)}

html:not(.estienne-designer-embedded) #root{height:100%;min-height:0}
html:not(.estienne-designer-embedded) .hero{min-height:100%}
html:not(.estienne-designer-embedded) .configurator{height:100%}
html.estienne-designer-embedded .designer-site-nav{display:none !important}

@media(max-width:640px){
  :root{--designer-site-nav-height:64px}
  .designer-site-nav.topbar{padding:12px 16px}
  .designer-site-nav .wordmark{font-size:1.05rem}
}

@media(prefers-reduced-motion:reduce){
  .designer-site-nav .menu-toggle .caret{transition:none}
}