/* ==========================================================================
   FOOTER MODULE STYLES (Extracted from common.css)
   ========================================================================== */

/* 1. Core Variables Required by Footer */
:root {
  --cocoa: #3C2C23;      /* Footer background color */
  --clay: #D8B8A3;       /* Footer primary text & link color */
  --parchment: #F3E8D8;  /* Brand mark text color */
  --ember: #C65A2E;      /* Accent color & hover state */
  --display: "Cormorant Garamond", Georgia, serif;
}

/* 2. Footer Layout & Styling Rules */
footer {
  background: var(--cocoa);
  color: var(--clay);
  padding: clamp(3.5rem, 7vw, 5rem) 0 2.5rem;
}

.f-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(243, 232, 216, 0.16);
}

.f-mark {
  font-family: var(--display);
  font-size: 1.5rem;
  color: var(--parchment);
  line-height: 1.2;
}

.f-mark em {
  font-style: italic;
  color: var(--ember);
}

.f-tag {
  font-size: .8125rem;
  color: rgba(216, 184, 163, .82);
  margin-top: .625rem;
  max-width: 30ch;
  line-height: 1.6;
}

.f-links {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: flex-start;
}

.f-links a {
  font-size: .8125rem;
  color: var(--clay);
  text-decoration: none;
  transition: color .25s;
}

.f-links a:hover {
  color: var(--ember);
}

.f-bot {
  padding-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  font-size: .75rem;
  color: rgba(216, 184, 163, .78);
}