/* Amber & Ash: brand tokens, header and footer.
   Kept separate from site.css so the Name Sign Designer page can use the same header and footer
   without the rest of the site's styles. Every class here starts with "aa-". */

/* ---------- fonts: self-hosted copies of the Google Fonts files (see site/static/fonts/FONTS.txt).
   Each family has a Latin file and a Latin Extended file; browsers only fetch the second for
   characters such as ł or ő. The regular and bold Libre Baskerville share one variable file. */
@font-face {
  font-family: "Libre Baskerville"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/libre-baskerville-v24-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Libre Baskerville"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/libre-baskerville-v24-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Libre Baskerville"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/libre-baskerville-v24-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Libre Baskerville"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/libre-baskerville-v24-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Libre Baskerville"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/fonts/libre-baskerville-v24-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Libre Baskerville"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/fonts/libre-baskerville-v24-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("/fonts/montserrat-v31-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Montserrat"; font-style: normal; font-weight: 400 600; font-display: swap;
  src: url("/fonts/montserrat-v31-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --aa-amber: #8f4414;
  --aa-amber-dark: #74360f;
  --aa-ash: #363533;
  --aa-linen: #efebe4;
  --aa-paper: #f6f3ee;
  --aa-blush: #e2c2b3;
  --aa-clay: #73584a;
  --aa-line: #e2dbd0;
  --aa-white: #ffffff;
  --aa-serif: "Libre Baskerville", Georgia, "Times New Roman", serif;
  --aa-sans: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --aa-wrap: 1200px;
  --aa-radius: 14px;
  --aa-focus: 0 0 0 3px var(--aa-paper), 0 0 0 5px var(--aa-amber);
}

.aa-wrap {
  max-width: var(--aa-wrap);
  margin-inline: auto;
  padding-inline: 16px;
}
@media (min-width: 768px) { .aa-wrap { padding-inline: 32px; } }

.aa-sr, .sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.aa-skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--aa-ash); color: var(--aa-white);
  font: 600 15px/1 var(--aa-sans); padding: 12px 16px; border-radius: 8px; text-decoration: none;
}
.aa-skip:focus { top: 12px; }

/* ---------- announcement bar */
.aa-announce {
  background: var(--aa-ash);
  color: var(--aa-linen);
  font: 500 13px/1.4 var(--aa-sans);
  letter-spacing: 0.02em;
  text-align: center;
}
.aa-announce p { margin: 0; padding: 8px 16px; }
@media (max-width: 520px) { .aa-announce-extra { display: none; } }

/* ---------- header */
.aa-header {
  background: var(--aa-paper);
  border-bottom: 1px solid var(--aa-line);
  position: relative;
  z-index: 20;
  font-family: var(--aa-sans);
}
.aa-header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 72px;
}
.aa-logo { display: inline-flex; flex: none; border-radius: 4px; }
.aa-logo img { display: block; width: 172px; height: auto; }
@media (min-width: 1000px) { .aa-logo img { width: 214px; } }

.aa-nav { margin-left: auto; display: none; }
.aa-nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.aa-nav a {
  display: block;
  padding: 10px 12px;
  color: var(--aa-ash);
  font: 500 15px/1.2 var(--aa-sans);
  text-decoration: none;
  border-radius: 8px;
}
.aa-nav a:hover { color: var(--aa-amber); }
.aa-nav a[aria-current] { color: var(--aa-amber); box-shadow: inset 0 -2px 0 var(--aa-amber); border-radius: 0; }

.aa-etsy-link {
  display: none;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 10px 16px;
  border: 1.5px solid var(--aa-ash);
  border-radius: 999px;
  color: var(--aa-ash);
  font: 600 14px/1 var(--aa-sans);
  text-decoration: none;
  white-space: nowrap;
}
.aa-etsy-link:hover { background: var(--aa-ash); color: var(--aa-white); }

@media (min-width: 960px) {
  .aa-nav { display: block; }
  .aa-etsy-link { display: inline-flex; }
  .aa-menu { display: none; }
}

/* mobile menu (no JavaScript needed) */
.aa-menu { margin-left: auto; }
.aa-menu summary {
  list-style: none;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 10px;
  cursor: pointer;
}
.aa-menu summary::-webkit-details-marker { display: none; }
.aa-menu-icon, .aa-menu-icon::before, .aa-menu-icon::after {
  display: block; width: 22px; height: 2px; background: var(--aa-ash); border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.aa-menu-icon { position: relative; }
.aa-menu-icon::before, .aa-menu-icon::after { content: ""; position: absolute; left: 0; }
.aa-menu-icon::before { top: -7px; }
.aa-menu-icon::after { top: 7px; }
.aa-menu[open] .aa-menu-icon { background: transparent; }
.aa-menu[open] .aa-menu-icon::before { transform: translateY(7px) rotate(45deg); }
.aa-menu[open] .aa-menu-icon::after { transform: translateY(-7px) rotate(-45deg); }
.aa-menu-panel {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--aa-paper);
  border-bottom: 1px solid var(--aa-line);
  box-shadow: 0 18px 30px -18px rgba(54, 53, 51, .35);
}
.aa-menu-panel ul { list-style: none; margin: 0; padding: 8px 16px 16px; }
.aa-menu-panel a {
  display: block;
  padding: 14px 4px;
  border-bottom: 1px solid var(--aa-line);
  color: var(--aa-ash);
  font: 500 17px/1.2 var(--aa-sans);
  text-decoration: none;
}
.aa-menu-panel li:last-child a { border-bottom: 0; color: var(--aa-amber); font-weight: 600; }

/* ---------- rating badge */
.aa-rating {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  color: inherit;
  font: 400 14px/1.4 var(--aa-sans);
  text-decoration: none;
}
.aa-rating:hover span:last-child { text-decoration: underline; }
.aa-stars { color: var(--aa-amber); letter-spacing: 2px; font-size: 16px; }

/* ---------- footer */
.aa-footer {
  background: var(--aa-ash);
  color: var(--aa-linen);
  font: 400 15px/1.6 var(--aa-sans);
  margin-top: 0;
}
.aa-footer a { color: var(--aa-linen); }
.aa-footer-grid {
  display: grid;
  gap: 32px 24px;
  padding-block: 56px 32px;
  grid-template-columns: 1fr 1fr;
}
.aa-footer-brand { grid-column: 1 / -1; max-width: 360px; }
.aa-footer-brand img { display: block; width: 140px; height: auto; margin-bottom: 16px; }
.aa-footer-brand p { margin: 0 0 14px; color: var(--aa-blush); }
.aa-footer .aa-stars { color: var(--aa-blush); }
.aa-footer h2 {
  margin: 0 0 12px;
  font: 600 13px/1.3 var(--aa-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--aa-blush);
}
.aa-footer ul { list-style: none; margin: 0; padding: 0; }
.aa-footer li + li { margin-top: 6px; }
.aa-footer-col a { text-decoration: none; }
.aa-footer-col a:hover { text-decoration: underline; }
.aa-footer-col p { margin: 0 0 14px; color: var(--aa-blush); }
.aa-footer-btn {
  display: inline-block;
  padding: 11px 18px;
  border: 1.5px solid var(--aa-linen);
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
}
.aa-footer-btn:hover { background: var(--aa-linen); color: var(--aa-ash); text-decoration: none !important; }
.aa-footer-base {
  display: flex; flex-wrap: wrap; gap: 4px 24px; justify-content: space-between;
  padding-block: 20px 28px;
  border-top: 1px solid rgba(239, 235, 228, .18);
  font-size: 13px;
  color: var(--aa-blush);
}
.aa-footer-base p { margin: 0; }
.aa-footer-brand .aa-footer-social { margin: 14px 0 0; }
.aa-footer-social a { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 900px) {
  .aa-footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr 1.2fr; }
  .aa-footer-brand { grid-column: auto; }
}

/* ---------- email sign-up strip, just above the footer */
.aa-signup {
  background: var(--aa-linen);
  border-top: 1px solid var(--aa-line);
  color: var(--aa-ash);
  font: 400 15px/1.6 var(--aa-sans);
}
.aa-signup-inner { display: grid; gap: 18px 48px; padding-block: 40px; align-items: center; }
.aa-signup h2 {
  margin: 0 0 6px;
  font: 700 clamp(1.3rem, 1.1rem + .8vw, 1.6rem)/1.25 var(--aa-serif);
  letter-spacing: -0.01em;
  color: var(--aa-ash);
}
.aa-signup-copy p { margin: 0; color: var(--aa-clay); max-width: 46ch; }
.aa-signup-row { display: flex; flex-wrap: wrap; gap: 8px; }
.aa-signup input[type="email"] {
  flex: 1 1 220px; min-width: 0; height: 48px; padding: 0 18px;
  border: 1.5px solid var(--aa-clay); border-radius: 999px;
  background: var(--aa-white); color: var(--aa-ash);
  font: 400 16px/1 var(--aa-sans);
}
.aa-signup input[type="email"]::placeholder { color: #8a7a70; }
.aa-signup button {
  flex: 0 0 auto; height: 48px; padding: 0 26px;
  border: 0; border-radius: 999px;
  background: var(--aa-amber); color: var(--aa-white);
  font: 600 15px/1 var(--aa-sans); cursor: pointer;
}
.aa-signup button:hover { background: var(--aa-amber-dark); }
.aa-signup button[disabled] { opacity: .65; cursor: progress; }
.aa-signup input:focus-visible, .aa-signup button:focus-visible, .aa-signup a:focus-visible { outline: none; box-shadow: var(--aa-focus); }
.aa-signup-note { margin: 10px 0 0; font-size: 13px; line-height: 1.5; color: var(--aa-clay); }
.aa-signup-note a { color: var(--aa-ash); }
.aa-signup-status { margin: 10px 0 0; font-size: 14px; font-weight: 600; color: var(--aa-ash); }
.aa-signup-status:empty { display: none; }
.aa-signup-status.is-error { color: #8f1d14; }
.aa-signup-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 520px) { .aa-signup button { flex: 1 1 100%; } }
@media (min-width: 900px) { .aa-signup-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.aa-header a:focus-visible, .aa-footer a:focus-visible, .aa-menu summary:focus-visible, .aa-rating:focus-visible {
  outline: none;
  box-shadow: var(--aa-focus);
}
.aa-footer a:focus-visible { box-shadow: 0 0 0 3px var(--aa-ash), 0 0 0 5px var(--aa-blush); }