/* Main Page */
@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&family=Instrument+Serif:ital@0;1&family=Crimson+Pro:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&display=swap');

:root {
  --rust:    #4c1d10;
  --gold:    #d3a85e;
  --parch:   #dbcfa4;
  --crimson: #671c02;
  --bark:    #3e2f17;
  --amber:   #d07629;

  --parch-lt: #ede5c8;
  --parch-dk: #c8b882;
  --gold-lt:  #e8cfa0;
  --rust-lt:  #6b2e1a;
  --cream:    #f8f2e6;

  --hb-bg: #f9f5ed;
  --hb-bg2: #f2ece0;
  --hb-deepred: #671c02;

  --display: 'IM Fell English', Georgia, serif;
  --serif:   'Instrument Serif', Georgia, serif;
  --body:    'Crimson Pro', Georgia, serif;

  --gap: clamp(64px, 8vw, 120px);
  --wrap: 1140px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --r-pill: 100px;
}

.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(320px,100vw); background: var(--cream);
  z-index: 200; transform: translateX(110%); transition: transform 0.45s var(--ease);
  padding: 64px 40px 40px; box-shadow: -6px 0 48px rgba(62,47,23,0.15); display: flex; flex-direction: column; }
.drawer.open { transform: translateX(0); }
.drawer-x { position: absolute; top: 22px; right: 24px; background: none; border: none; font-size: 16px; color: var(--bark); cursor: pointer; }
.drawer ul { margin-top: 12px; list-style: none !important; padding: 0; }
.drawer ul li { border-bottom: 1px solid rgba(62,47,23,0.1); list-style: none !important; }
.drawer ul li a {
  display: block;
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--bark);
  padding: 14px 0;
  text-decoration: none !important;
  transition: color 0.2s;
}
.drawer ul li a:hover{ color: var(--amber); }

/* Drawer CTA buttons — uniform size, distinct palette colors, even spacing */
.drawer ul li a.drawer-button{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:42px;
  box-sizing:border-box;
  padding:12px 14px;
  text-align:center;
  line-height:1.15;
  font-size:0.8rem;
  letter-spacing:0.02em;
  font-family: var(--body);
  text-transform: uppercase;
  border-radius: var(--r-pill);
}

.drawer ul li a.drawer-button.db-guide{ background:#d07629; color:#f5efe2; }
.drawer ul li a.drawer-button.db-community{ background:#4c1d10; color:#dbcfa4; }
.drawer ul li a.drawer-button.db-handbook{ background:#d3a85e; color:#4c1d10; }
.drawer ul li a.drawer-button.db-call{ background:#671c02; color:#dbcfa4; }

.drawer ul li{ margin-top:6px; }
.drawer ul li:first-child{ margin-top:0; }
.drawer ul li:last-child{ margin-top:6px; }