/* ── Page background ─────────────────────────────────────────── */
    body {
      background: linear-gradient(155deg, #f0e9de 0%, #e8dfd4 100%);
    }

    /* ── Scrolled header: dark glass ─────────────────────────────── */
    .site-header.scrolled {
      background: rgba(13, 10, 7, 0.92);
      -webkit-backdrop-filter: blur(14px);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      transition: background 0.25s ease, border-color 0.25s ease;
    }

    .site-header.scrolled::before {
      opacity: 0;
      transition: opacity 0.25s ease;
    }

    /* ── Active nav indicator ─────────────────────────────────────── */
    .site-nav a[aria-current="page"] {
      border-bottom: 2px solid rgba(200, 169, 138, 0.72);
      padding-bottom: 1px;
    }

    /* ── Login section ───────────────────────────────────────────── */
    .login-section {
      padding: clamp(40px, 6vw, 72px) 24px clamp(80px, 12vw, 140px);
      display: grid;
      place-items: center;
      min-height: calc(100vh - 80px);
    }

    /* ── Split card ──────────────────────────────────────────────── */
    .login-card {
      display: grid;
      grid-template-columns: 1.06fr 1fr;
      width: min(980px, 100%);
      border-radius: 28px;
      overflow: hidden;
      box-shadow:
        0 2px 0 rgba(255, 255, 255, 0.72) inset,
        0 40px 100px rgba(18, 11, 6, 0.18),
        0 12px 32px rgba(18, 11, 6, 0.1),
        0 3px 8px rgba(18, 11, 6, 0.06);
    }

    /* ── Brand / image left panel ────────────────────────────────── */
    .login-brand {
      position: relative;
      min-height: 620px;
      background: #0c0a07;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 40px 40px 44px;
    }

    .login-brand-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 52% 22%;
      filter: saturate(0.6) brightness(0.46);
    }

    .login-brand-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(
        to top,
        rgba(7, 5, 3, 0.94) 0%,
        rgba(7, 5, 3, 0.48) 48%,
        rgba(7, 5, 3, 0.12) 100%
      );
    }

    .login-brand-content {
      position: relative;
      z-index: 1;
    }

    .login-brand-eyebrow {
      font-size: 0.69rem;
      font-weight: 800;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: #c8a98a;
      margin: 0 0 18px;
    }

    .login-brand-heading {
      font-family: "Fraunces", serif;
      font-size: clamp(1.8rem, 2.6vw, 2.5rem);
      font-weight: 600;
      line-height: 1.06;
      letter-spacing: -0.04em;
      color: #fff;
      margin: 0 0 14px;
      max-width: 14ch;
    }

    .login-brand-lead {
      font-size: 0.9rem;
      line-height: 1.74;
      color: rgba(255, 255, 255, 0.58);
      margin: 0 0 28px;
      max-width: 30ch;
    }

    .login-brand-rule {
      width: 40px;
      height: 2px;
      background: linear-gradient(90deg, #c8a98a, rgba(200, 169, 138, 0.15));
      border-radius: 999px;
      margin-bottom: 22px;
    }

    .login-brand-bullets {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 11px;
    }

    .login-brand-bullets li {
      display: flex;
      align-items: center;
      gap: 11px;
      font-size: 0.87rem;
      color: rgba(255, 255, 255, 0.78);
      font-weight: 500;
      line-height: 1.4;
    }

    .login-brand-dot {
      width: 5px;
      height: 5px;
      border-radius: 50%;
      background: #c8a98a;
      flex-shrink: 0;
    }

    /* ── Form right panel ────────────────────────────────────────── */
    .login-form-col {
      background: #fefcf8;
      padding: clamp(32px, 5vw, 52px) clamp(26px, 4.5vw, 48px);
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .form-label-eyebrow {
      display: inline-block;
      margin: 0 0 18px;
      padding: 6px 16px;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(244, 236, 225, 0.9));
      border: 1px solid rgba(159, 131, 108, 0.22);
      border-radius: 999px;
      font-size: 0.72rem;
      font-weight: 800;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: #9f836c;
    }

    .form-title {
      margin: 0 0 8px;
      font-family: "Fraunces", serif;
      font-size: clamp(2.4rem, 3.6vw, 3.4rem);
      font-weight: 600;
      line-height: 0.94;
      letter-spacing: -0.05em;
      color: #160f09;
    }

    .form-subtitle {
      margin: 0 0 28px;
      font-size: 0.96rem;
      line-height: 1.7;
      color: #6b5d51;
    }

    /* ── Fields ──────────────────────────────────────────────────── */
    .field {
      margin-bottom: 18px;
    }

    .field label {
      display: block;
      margin-bottom: 7px;
      font-size: 0.92rem;
      font-weight: 700;
      letter-spacing: 0.01em;
      color: #2a1c12;
    }

    .field-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 7px;
    }

    .field-row label { margin-bottom: 0; }

    .field-icon-wrap {
      position: relative;
      display: flex;
      align-items: center;
    }

    .field-lead-icon {
      position: absolute;
      left: 15px;
      width: 16px;
      height: 16px;
      fill: none;
      stroke: #c4ae9c;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      pointer-events: none;
      z-index: 1;
    }

    .field input[type="email"],
    .field input[type="password"],
    .field input[type="text"] {
      display: block;
      width: 100%;
      min-height: 54px;
      padding: 14px 16px;
      font-family: "Manrope", sans-serif;
      font-size: 0.98rem;
      color: #1c1208;
      background: #f9f5ef;
      border: 1.5px solid rgba(40, 31, 25, 0.12);
      border-radius: 14px;
      outline: none;
      transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
      -webkit-appearance: none;
      box-shadow: 0 1px 3px rgba(22, 14, 9, 0.04) inset;
    }

    .field-icon-wrap input[type="email"],
    .field-icon-wrap input[type="password"],
    .field-icon-wrap input[type="text"] {
      padding-left: 42px;
    }

    .field-icon-wrap input[type="password"],
    .field-icon-wrap input[type="text"] {
      padding-right: 48px;
    }

    .field input::placeholder { color: #bca898; }

    .field input:focus {
      border-color: #9f836c;
      box-shadow: 0 0 0 3.5px rgba(159, 131, 108, 0.13);
      background: #fff;
    }

    .field input:-webkit-autofill,
    .field input:-webkit-autofill:hover,
    .field input:-webkit-autofill:focus {
      -webkit-text-fill-color: #1c1208;
      -webkit-box-shadow: 0 0 0 1000px #f9f5ef inset;
      transition: background-color 9999s ease-in-out 0s;
      border: 1.5px solid rgba(40, 31, 25, 0.12);
    }

    /* ── Forgot link ─────────────────────────────────────────────── */
    .forgot-link {
      font-size: 0.86rem;
      font-weight: 600;
      color: #7b6858;
      text-decoration: none;
      transition: color 0.2s, border-color 0.2s;
      border-bottom: 1px solid transparent;
      white-space: nowrap;
    }

    .forgot-link:hover {
      color: #9f836c;
      border-bottom-color: #c8a98a;
    }

    /* ── Password show/hide toggle ───────────────────────────────── */
    .pw-toggle {
      position: absolute;
      right: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      padding: 0;
      border: none;
      background: transparent;
      cursor: pointer;
      color: #c4ae9c;
      transition: color 0.2s;
      z-index: 1;
    }

    .pw-toggle:hover { color: #9f836c; }

    .pw-toggle svg {
      width: 18px;
      height: 18px;
      fill: none;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    [data-eye-closed] { display: none; }

    /* ── Remember me row ─────────────────────────────────────────── */
    .remember-row {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 22px;
      cursor: pointer;
      padding: 12px 14px;
      background: #f6f1ea;
      border: 1.5px solid rgba(40, 31, 25, 0.08);
      border-radius: 12px;
      transition: border-color 0.2s, background 0.2s;
    }

    .remember-row:hover {
      background: #f0e9de;
      border-color: rgba(40, 31, 25, 0.14);
    }

    .remember-row input[type="checkbox"] {
      width: 17px;
      height: 17px;
      accent-color: #2d221c;
      flex-shrink: 0;
      cursor: pointer;
    }

    .remember-row span {
      font-size: 0.93rem;
      font-weight: 600;
      color: #432e22;
    }

    /* ── Sign-in button ──────────────────────────────────────────── */
    .btn-signin {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      min-height: 58px;
      padding: 0 28px;
      background: linear-gradient(135deg, #1c1108 0%, #3c2618 100%);
      color: #fff;
      font-family: "Manrope", sans-serif;
      font-size: 0.96rem;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      border: none;
      border-radius: 14px;
      cursor: pointer;
      transition: transform 0.18s, box-shadow 0.2s;
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 4px 18px rgba(22, 14, 9, 0.22),
        0 1px 4px rgba(22, 14, 9, 0.14);
    }

    .btn-signin:hover {
      transform: translateY(-2px);
      box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 12px 32px rgba(22, 14, 9, 0.28),
        0 3px 8px rgba(22, 14, 9, 0.16);
    }

    .btn-signin:active { transform: none; }

    @keyframes login-spin { to { transform: rotate(360deg); } }

    .btn-signin.is-loading {
      pointer-events: none;
      opacity: 0.78;
    }

    .btn-spinner {
      display: none;
      width: 16px;
      height: 16px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      border-top-color: #fff;
      border-radius: 50%;
      animation: login-spin 0.7s linear infinite;
      flex-shrink: 0;
    }

    .btn-signin.is-loading .btn-spinner { display: block; }

    /* ── Security note ───────────────────────────────────────────── */
    .form-footer-note {
      display: flex;
      align-items: flex-start;
      gap: 9px;
      margin-top: 18px;
      padding: 14px 16px;
      background: rgba(159, 131, 108, 0.07);
      border-radius: 12px;
      border: 1px solid rgba(159, 131, 108, 0.15);
      font-size: 0.84rem;
      color: #8a7868;
      line-height: 1.55;
    }

    .shield-icon {
      flex-shrink: 0;
      width: 13px;
      height: 13px;
      margin-top: 2px;
      fill: #9f836c;
    }

    /* ── Register nudge ──────────────────────────────────────────── */
    .form-register-nudge {
      margin-top: 16px;
      text-align: center;
      font-size: 0.86rem;
      color: #8a7868;
    }

    .form-register-nudge a {
      color: #2a1c12;
      font-weight: 700;
      border-bottom: 1.5px solid #c8a98a;
      transition: color 0.18s, border-color 0.18s;
    }

    .form-register-nudge a:hover {
      color: #9f836c;
      border-color: transparent;
    }

    /* ── Inline field errors ─────────────────────────────────────── */
    .field.has-error input[type="email"],
    .field.has-error input[type="password"],
    .field.has-error input[type="text"] {
      border-color: rgba(176, 64, 64, 0.5);
      box-shadow: 0 0 0 3.5px rgba(176, 64, 64, 0.08);
      background: #fff;
    }

    .field-error {
      display: block;
      margin-top: 6px;
      font-size: 0.81rem;
      font-weight: 600;
      color: #b04040;
      line-height: 1.4;
    }

    /* ── Responsive ──────────────────────────────────────────────── */
    @media (max-width: 860px) {
      .login-section {
        padding: 20px 16px 72px;
        min-height: unset;
        display: block;
      }

      .login-card {
        grid-template-columns: 1fr;
        border-radius: 22px;
        width: 100%;
        max-width: 480px;
        margin: 0 auto;
      }

      /* Cinematic top banner — taller + centred */
      .login-brand {
        min-height: 200px;
        justify-content: flex-end;
        align-items: center;
        text-align: center;
        padding: 28px 28px 30px;
      }

      .login-brand-content { width: 100%; }

      /* Hide verbose content in the banner strip */
      .login-brand-lead,
      .login-brand-rule,
      .login-quote-rotator,
      .login-brand-bullets,
      .login-matches-card { display: none; }

      .login-brand-eyebrow {
        margin-bottom: 6px;
        text-align: center;
      }

      .login-brand-heading {
        font-size: 1.7rem;
        max-width: 100%;
        margin: 0 auto;
        text-align: center;
      }
    }

    @media (max-width: 560px) {
      .login-section { padding: 14px 12px 64px; }
      .login-card { border-radius: 18px; max-width: 100%; }

      .login-brand { min-height: 160px; padding: 20px 20px 22px; }
      .login-brand-eyebrow { font-size: 0.65rem; }
      .login-brand-heading { font-size: 1.45rem; }

      .login-form-col { padding: 22px 20px 26px; }

      .form-label-eyebrow { margin-bottom: 10px; padding: 4px 13px; font-size: 0.68rem; }

      .form-title { font-size: 1.72rem; }
      .form-subtitle { font-size: 0.88rem; margin-bottom: 16px; }

      .field { margin-bottom: 14px; }

      .field-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
      }

      .forgot-link { font-size: 0.82rem; }

      .field input[type="email"],
      .field input[type="password"],
      .field input[type="text"] { min-height: 50px; font-size: 0.94rem; }

      .remember-row { padding: 10px 12px; margin-bottom: 16px; }
      .remember-row span { font-size: 0.88rem; }

      .btn-signin { min-height: 52px; font-size: 0.88rem; letter-spacing: 0.07em; }

      /* Welcome-back strip compacted */
      .form-welcome-back { padding: 10px 12px; gap: 10px; margin-bottom: 12px; }
      .form-welcome-back-avatar { width: 30px; height: 30px; font-size: 0.78rem; }
      .form-welcome-back-text { font-size: 0.84rem; }

      /* Context banner compacted */
      .login-context-banner { padding: 10px 13px; font-size: 0.83rem; margin-bottom: 12px; }

      /* Security note */
      .form-footer-note { font-size: 0.79rem; padding: 10px 12px; margin-top: 14px; }

      .form-register-nudge { font-size: 0.82rem; margin-top: 14px; }

      .remember-row-help { font-size: 0.74rem; margin-bottom: 16px; }
    }

    @media (max-width: 400px) {
      .login-section { padding: 10px 8px 52px; }
      .login-brand { min-height: 140px; padding: 16px 16px 20px; }
      .login-brand-heading { font-size: 1.3rem; }
      .login-form-col { padding: 18px 16px 22px; }
      .form-title { font-size: 1.52rem; }
    }

/* ── Ken Burns animation on brand image ────────────────────── */
.login-brand-img {
  animation: kenBurnsLogin 24s ease-in-out infinite alternate;
}

@keyframes kenBurnsLogin {
  0%   { transform: scale(1.0) translate(0, 0); }
  100% { transform: scale(1.06) translate(-1.5%, 1%); }
}

/* ── Icon bullets ─────────────────────────────────────────── */
.login-brand-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.login-brand-bullet-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.login-brand-bullet-icon svg {
  width: 13px;
  height: 13px;
  stroke: #c8a98a;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.login-brand-bullet-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.login-brand-bullet-title {
  font-size: 0.87rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.3;
}

.login-brand-bullet-sub {
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.42);
  line-height: 1.4;
}

/* ── Rotating testimonials ────────────────────────────────── */
.login-quote-rotator {
  min-height: 80px;
  margin-bottom: 22px;
  position: relative;
}

.login-quote {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: opacity 0.9s ease;
  pointer-events: none;
}

.login-quote.is-active {
  opacity: 1;
  position: relative;
  pointer-events: auto;
}

.login-quote-text {
  margin: 0 0 7px;
  font-family: "Fraunces", serif;
  font-size: 0.9rem;
  font-style: italic;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}

.login-quote-attr {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: rgba(200, 169, 138, 0.78);
}

/* ── Matches-ready card ───────────────────────────────────── */
.login-matches-card {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding: 13px 15px;
  border-radius: 15px;
  background: rgba(74, 107, 82, 0.16);
  border: 1px solid rgba(74, 107, 82, 0.28);
}

.login-matches-pulse {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(140, 200, 150, 0.92);
  flex-shrink: 0;
  animation: matchesPulse 2.5s ease-in-out infinite;
}

@keyframes matchesPulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(74, 107, 82, 0.32); }
  50%       { box-shadow: 0 0 0 6px rgba(74, 107, 82, 0.05); }
}

.login-matches-label {
  margin: 0 0 2px;
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(155, 215, 160, 0.9);
}

.login-matches-copy {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.7);
}

.login-matches-badge {
  margin-left: auto;
  flex-shrink: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(74, 107, 82, 0.42);
  border: 1px solid rgba(74, 107, 82, 0.3);
  font-size: 0.61rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(155, 215, 160, 0.95);
  white-space: nowrap;
}

/* ── Context banner (shown via JS for ref= param) ─────────── */
.login-context-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 20px;
  padding: 13px 15px;
  background: linear-gradient(135deg, rgba(200, 169, 138, 0.1), rgba(200, 169, 138, 0.03));
  border: 1px solid rgba(200, 169, 138, 0.24);
  border-radius: 14px;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.55;
  color: #2a1c12;
}

.login-context-banner[hidden] { display: none; }

.login-context-banner svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  stroke: #9f836c;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Welcome-back strip ───────────────────────────────────── */
.form-welcome-back {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding: 12px 15px;
  background: linear-gradient(135deg, rgba(200, 169, 138, 0.09), rgba(200, 169, 138, 0.03));
  border: 1px solid rgba(200, 169, 138, 0.22);
  border-radius: 14px;
}

.form-welcome-back[hidden] { display: none; }

.form-welcome-back-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c8a98a, #9f836c);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.form-welcome-back-text {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: #2a1c12;
  flex: 1;
  min-width: 0;
}

.form-welcome-back-clear {
  font-size: 0.76rem;
  font-weight: 600;
  color: #9f836c;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.15s;
}

.form-welcome-back-clear:hover { color: #7b6858; }

/* ── Caps Lock warning ────────────────────────────────────── */
.caps-lock-warn {
  display: none;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #9f836c;
}

.caps-lock-warn.is-visible { display: flex; }

.caps-lock-warn svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  stroke: #9f836c;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
}

/* ── Field success state (green check on valid blur) ─────── */
.field.is-valid input[type="email"],
.field.is-valid input[type="password"],
.field.is-valid input[type="text"] {
  border-color: rgba(74, 107, 82, 0.45);
  box-shadow: 0 0 0 3.5px rgba(74, 107, 82, 0.09);
}

.field-success-icon {
  position: absolute;
  right: 12px;
  width: 16px;
  height: 16px;
  pointer-events: none;
  display: none;
  flex-shrink: 0;
}

.field.is-valid .field-success-icon { display: block; }
.field.has-pw-toggle .field-success-icon { right: 46px; }

.field-success-icon circle { fill: rgba(74, 107, 82, 0.88); }
.field-success-icon path {
  stroke: #fff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* ── Remember-me helper text ──────────────────────────────── */
.remember-row-help {
  margin: -10px 0 22px;
  padding: 0 2px;
  font-size: 0.78rem;
  color: #9f836c;
  line-height: 1.5;
}