/* =====================================================================
   auth-layout.css — shared shell for all auth-surface pages
   (index.html / sign-in, sign-up; reset-password.html; any future
   password-change or verify page).

   Keeps the two-column layout (hero | form) pixel-identical across
   pages so the hero never jumps width on navigation. Load after
   globals.css and theme.css.
   ===================================================================== */

/* Force a permanent scrollbar gutter so the viewport width stays
   constant whether the page content is taller than the screen or not.
   Without this a tall sign-up form (scrollbar present) vs a short
   reset form (no scrollbar) shifts the 1fr columns by ~17 px. */
html {
  overflow-y: scroll;
}

html, body {
  min-height: 100%;
}

body {
  background: #ffffff !important;
  color: #0f1014 !important;
  font-family: "Nata Sans", system-ui, -apple-system, sans-serif;
}

/* -----------------------------------------------------------------
   Two-column shell
   ----------------------------------------------------------------- */
.auth-shell {
  display: grid;
  min-height: 100vh;
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .auth-shell {
    /* Fixed hero width so the column never resizes based on content.
       The form side gets all remaining space. */
    grid-template-columns: 480px 1fr;
  }
}

@media (min-width: 1200px) {
  .auth-shell {
    grid-template-columns: 2fr 2fr;
  }
}

/* -----------------------------------------------------------------
   Left: dark branded panel
   ----------------------------------------------------------------- */
.auth-hero {
  display: none;
}

@media (min-width: 900px) {
  .auth-hero {
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 56px 56px 48px;
    margin: 20px 0 20px 20px;
    border-radius: 20px;
    min-height: calc(100vh - 40px);
    background:
      radial-gradient(ellipse at 20% 0%,   rgba(212,160,85,0.22),  transparent 55%),
      radial-gradient(ellipse at 80% 100%,  rgba(184,134,68,0.16),  transparent 55%),
      #0e0b08;
    color: #f6f1e7;
    overflow: hidden;
  }
}

@media (min-width: 1200px) {
  .auth-hero {
    padding: 64px 72px 56px;
  }
}

.auth-hero .hero-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.auth-hero .hero-brand img {
  width: 32px;
  height: 32px;
  display: block;
}
.auth-hero .hero-brand .b1 {
  font-family: "Platypi", serif;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.005em;
}

/* -----------------------------------------------------------------
   Right: form pane
   ----------------------------------------------------------------- */
.auth-pane {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}

@media (min-width: 900px) {
  .auth-pane {
    padding: 56px 48px;
  }
}

.auth-card {
  width: 100%;
  max-width: 400px;
}

.auth-card .pane-brand {
  display: flex;
  justify-content: center;
  margin-bottom: 28px;
}
.auth-card .pane-brand img {
  width: 40px;
  height: 40px;
  display: block;
}

.auth-card h1 {
  text-align: center;
  font-family: "Platypi", serif;
  font-weight: 500;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #0f1014;
}
.auth-card h1 em {
  font-style: italic;
  color: #8e6b26;
  font-weight: 500;
}

.auth-card .pane-lede {
  text-align: center;
  margin-top: 10px;
  font-size: 14.5px;
  color: #4b4b52;
  line-height: 1.55;
}