@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;1,400;1,600&display=swap');

:root {
  --logo-green:       #7A9E7E;
  --logo-green-dark:  #5A7A5E;
  --logo-green-light: #A8C5A0;
  --logo-brown:       #3D2B1F;
  --logo-brown-mid:   #8B7355;
  --logo-brown-light: #C4B49A;
  --logo-stem:        #8B6E52;
  --logo-plate-bg:    #FFFFFF;
  --logo-plate-rim:   #D6CFC3;
  --logo-plate-rim2:  #E8E3DB;
  --logo-plate-fill:  #FDFCFA;
  --logo-shadow:      #C8B89A;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0;
  line-height: 1;
  user-select: none;
}

.logo svg { display: block; }

.logo--sm  { --logo-size: 32px; }
.logo--md  { --logo-size: 48px; }
.logo--lg  { --logo-size: 72px; }
.logo--xl  { --logo-size: 120px; }

.logo--icon-only .logo-wordmark { display: none; }

.logo-wordmark {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: calc(var(--logo-size) * 0.18);
  gap: 0;
}

.logo-wordmark__prefix {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  color: var(--logo-green);
  margin-bottom: calc(var(--logo-size) * -0.04);
}

.logo-wordmark__name {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 600;
  line-height: 1;
  color: var(--logo-brown);
  white-space: nowrap;
}

.logo-wordmark__divider {
  height: 1px;
  background: var(--logo-brown-light);
  margin-top: calc(var(--logo-size) * 0.07);
  margin-bottom: calc(var(--logo-size) * 0.07);
}

.logo-wordmark__sub {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0.25em;
  color: var(--logo-brown-mid);
  white-space: nowrap;
}

.logo--sm .logo-wordmark__prefix { font-size: 9px; }
.logo--sm .logo-wordmark__name   { font-size: 20px; }
.logo--sm .logo-wordmark__sub    { font-size: 7px; }

.logo--md .logo-wordmark__prefix { font-size: 13px; }
.logo--md .logo-wordmark__name   { font-size: 30px; }
.logo--md .logo-wordmark__sub    { font-size: 9px; }

.logo--lg .logo-wordmark__prefix { font-size: 18px; }
.logo--lg .logo-wordmark__name   { font-size: 44px; }
.logo--lg .logo-wordmark__sub    { font-size: 12px; }

.logo--xl .logo-wordmark__prefix { font-size: 28px; }
.logo--xl .logo-wordmark__name   { font-size: 72px; }
.logo--xl .logo-wordmark__sub    { font-size: 18px; }