/* =========================================================
   BUTTONS
   ========================================================= */

.button {
  padding: 13px 26px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  border: none;
  border-radius: 999px;

  cursor: pointer;

  transition:
    filter var(--transition-fast),
    transform var(--transition-fast);
}

.button:hover {
  filter: brightness(1.06);
}

.button-primary {
  color: var(--bg-deep);

  background:
    linear-gradient(
      135deg,
      var(--gold-soft),
      var(--gold)
    );
}
/* ========================================
   CARD
   ======================================== */

.card {
  width: 100%;

  background: var(--surface);

  border: 1px solid var(--line);
  border-radius: var(--radius-lg);

  box-shadow: var(--shadow-card);
}
/* =========================
   Form Fields
   ========================= */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

input,
select,
textarea {
  width: 100%;

  font-family: var(--font-body);
  font-size: 15px;

  color: var(--text);
  background: var(--bg-deep);

  border: 1px solid var(--line);
  border-radius: var(--radius-sm);

  padding: 11px 10px;
}
/* =========================
   Text Components
   ========================= */

.eyebrow{
  font-family:'Space Mono',monospace; font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold); margin:0 0 14px;
}
.subhead{ font-size:14px; line-height:1.55; color:var(--muted); }
/* =========================
   Chips
   ========================= */

.chips{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:22px; }
.chip{
  font-family:'Space Mono',monospace; font-size:10px; color:var(--muted);
  border:1px solid var(--line); border-radius:999px; padding:5px 11px;
}
.chip b{ color:var(--text); font-weight:600; }
/* =========================================================
   ANIMATIONS
   ========================================================= */

 /* ── Result panel ── */
.result{ display:none; animation:fadeUp .5s ease forwards; }
.result.visible{ display:block; }
@keyframes fadeUp{ from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} } 

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* ========================================
   Site Header
======================================== */

.site-header {
  width: 100%;
}

.site-header-inner {
  width: 100%;
  max-width: var(--content-wide);
  margin: 0 auto;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 24px 32px;

  box-sizing: border-box;
}

.site-logo {
  color: var(--text);
  text-decoration: none;

  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 300;
  font-size: 24px;
}

.site-logo img {
  display: block;
  width: 34px;
  height: 34px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.site-nav a {
  color: var(--muted);
  text-decoration: none;

  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  transition:
    color 180ms ease,
    opacity 180ms ease;
}

.site-nav a:hover {
  color: var(--text);
}
/* ========================================
   Site Shell
======================================== */

.site-shell {
  width: 100%;
  max-width: var(--content-wide);
  min-height: 100vh;
  margin: 0 auto;

  background: var(--bg);

  border-left: 1px solid var(--site-frame-line);
  border-right: 1px solid var(--site-frame-line);
}
/* ========================================
   Site Footer
======================================== */

.site-footer {
  width: 100%;
  margin-top: 96px;

  border-top: 1px solid var(--line);
}

.site-footer-inner {
  width: 100%;
  max-width: var(--content-wide);
  margin: 0 auto;

  display: flex;
  justify-content: space-between;
  gap: 48px;

  padding: 48px 32px;
}

.site-footer-brand {
  max-width: 320px;
}

.site-footer-brand p {
  margin-top: 12px;

  color: var(--muted);

  font-size: 13px;
  line-height: 1.6;
}

.site-footer-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.site-footer-nav a {
  color: var(--muted);
  text-decoration: none;

  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;

  transition: color 180ms ease;
}

.site-footer-nav a:hover {
  color: var(--text);
}

.site-footer-bottom {
  width: 100%;

  padding: 20px 32px;

  border-top: 1px solid var(--line);
}

.site-footer-bottom p {
  margin: 0;

  color: var(--muted);

  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* ========================================
   Basic Mobile Protection
======================================== */

@media (max-width: 760px) {

  .site-header-inner {
    padding: 20px 20px;
  }

  .site-nav {
    gap: 14px;
  }

  .site-nav a {
    font-size: 9px;
  }

  .site-footer-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 28px;
  }

  .site-footer-nav {
    align-items: flex-start;
  }

}