/* ============================================
   ASCERA WEBSITE — Production Stylesheet
   Phase 5 visual direction implementation
   May 2026
   ============================================ */

/* === RESET === */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; border: none; background: none; cursor: pointer; padding: 0; }
a { color: inherit; }


.formkit-form[data-uid="25572b4352"] .formkit-fields {
  flex-wrap: nowrap !important;
  align-items: stretch !important;
}

.formkit-form[data-uid="25572b4352"] .formkit-field {
  flex: 1 1 auto !important;
  max-width: 220px !important;
  margin: 0 5px 0 0 !important;
}

.formkit-form[data-uid="25572b4352"] .formkit-input {
  padding: 8px 12px !important;
}

.formkit-form[data-uid="25572b4352"] .formkit-submit {
  flex: 0 0 auto !important;
  margin: 0 !important;
  width: auto !important;
}

.formkit-form[data-uid="25572b4352"] .formkit-submit > span {
  height: 100%;
  display: flex !important;
  align-items: center;
  padding: 8px 24px !important;
}

.formkit-powered-by-convertkit-container {
  display: none !important;
}

/* === DESIGN TOKENS === */
:root {
  /* Foundation palette */
  --color-black: #111111;
  --color-charcoal: #2A2826;
  --color-warm-white: #FAFAF7;
  --color-parchment: #F0EDE7;
  --color-ash: #E5E0D8;
  --color-mid-grey: #6E6862;
  --color-light-grey: #C4BEB8;
  --color-white: #FFFFFF;

  /* Interactive palette */
  --color-verdigris: #2A5C52;
  --color-verdigris-deep: #1F4540;
  --color-verdigris-light: #E4EDEB;
  --color-clay: #6B5B4E;
  --color-clay-light: #D4C8BF;

  /* Status (warm-tinted) */
  --color-success-fg: #2A5C52;
  --color-success-bg: #E4EDEB;
  --color-error-fg: #8C2020;
  --color-error-bg: #FAF0F0;

  /* Typography stacks */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-editorial: Georgia, 'Times New Roman', serif;

  /* Type scale */
  --type-display: 44px;
  --type-h1: 36px;
  --type-h2: 26px;
  --type-h2-small: 22px;
  --type-h3: 17px;
  --type-lead: 20px;
  --type-body: 16px;
  --type-card-body: 15px;
  --type-caption: 13px;
  --type-label: 11px;

  /* Spacing (8px base) */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-7: 56px;
  --space-8: 64px;
  --space-10: 80px;
  --space-12: 96px;

  /* Layout */
  --content-max: 1080px;
  --reading-max: 580px;

  /* Radii */
  --radius-tight: 4px;
  --radius-default: 6px;
  --radius-loose: 12px;

  /* Borders */
  --border-thin: 0.5px solid var(--color-ash);
  --border-stronger: 1px solid var(--color-clay);

  /* Motion */
  --duration-quick: 100ms;
  --duration-standard: 200ms;
  --duration-deliberate: 350ms;
  --ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
}

/* === BASE === */
html { scroll-behavior: smooth; }

body {
  background: var(--color-warm-white);
  color: var(--color-black);
  font-family: var(--font-sans);
  font-size: var(--type-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* === LAYOUT === */
.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 40px;
}

@media (max-width: 768px) {
  .container { padding: 0 24px; }
}

/* === HEADER === */
.site-header {
  border-bottom: var(--border-thin);
}

.site-header .container {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: 22px;
  padding-bottom: 22px;
}

.wordmark {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 500;
  color: var(--color-black);
  letter-spacing: 0.5px;
  text-decoration: none;
}

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

.site-nav a {
  color: var(--color-clay);
  font-size: 13px;
  text-decoration: none;
  padding-bottom: 2px;
  transition: color var(--duration-quick) var(--ease-standard);
}

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

.site-nav a.active {
  border-bottom: 1px solid var(--color-clay);
}

.mobile-nav-toggle {
  display: none;
  flex-direction: column;
  gap: 4px;
}

.mobile-nav-toggle span {
  display: block;
  width: 18px;
  height: 1px;
  background: var(--color-charcoal);
}

@media (max-width: 768px) {
  .site-nav { display: none; }
  .mobile-nav-toggle { display: flex; }
  .site-nav.is-open {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: absolute;
    top: 60px;
    right: 24px;
    background: var(--color-warm-white);
    padding: 20px 24px;
    border: 0.5px solid var(--color-ash);
    border-radius: var(--radius-default);
    z-index: 10;
  }
}

/* === HERO === */
.hero {
  padding: var(--space-12) 0 var(--space-8);
}

.hero h1 {
  font-size: var(--type-display);
  font-weight: 500;
  line-height: 1.12;
  margin: 0 0 var(--space-3);
  color: var(--color-black);
  letter-spacing: -0.015em;
  max-width: 720px;
}

.hero .lead {
  font-family: var(--font-editorial);
  font-size: var(--type-lead);
  line-height: 1.5;
  color: var(--color-black);
  font-style: italic;
  margin: 0 0 var(--space-4);
  max-width: var(--reading-max);
}

.hero-cta { margin-top: var(--space-3); }

@media (max-width: 768px) {
  .hero { padding: var(--space-6) 0 var(--space-5); }
  .hero h1 { font-size: 30px; }
  .hero .lead { font-size: 17px; }
}

/* === SECTION === */
.section {
  padding: var(--space-7) 0;
  border-top: var(--border-thin);
}

.section .eyebrow {
  font-size: var(--type-label);
  color: var(--color-mid-grey);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  margin: 0 0 var(--space-2);
}

.section h2 {
  font-size: var(--type-h2);
  font-weight: 600;
  line-height: 1.25;
  color: var(--color-charcoal);
  margin: 0 0 var(--space-3);
  max-width: var(--reading-max);
  letter-spacing: -0.005em;
}

.section h3 {
  font-size: var(--type-h3);
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-charcoal);
  margin: var(--space-3) 0 var(--space-1);
}

.section p {
  font-size: var(--type-body);
  line-height: 1.65;
  color: var(--color-black);
  max-width: var(--reading-max);
  margin: 0 0 var(--space-2);
}

.section p a {
  color: var(--color-clay);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 0.5px;
  transition: color var(--duration-quick) var(--ease-standard);
}

.section p a:hover {
  color: var(--color-verdigris);
}

/* === BUTTONS === */
.btn-primary,
.btn-secondary {
  display: inline-block;
  padding: 12px 24px;
  border-radius: var(--radius-default);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-sans);
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  transition: all var(--duration-quick) var(--ease-standard);
}

.btn-primary {
  background: var(--color-verdigris);
  color: var(--color-warm-white);
  border: none;
}

.btn-primary:hover {
  background: var(--color-verdigris-deep);
}

.btn-secondary {
  background: transparent;
  color: var(--color-clay);
  border: 1px solid var(--color-clay);
  padding: 11px 23px;
}

.btn-secondary:hover {
  background: var(--color-clay-light);
  color: var(--color-charcoal);
}

/* === PULL QUOTES === */
.pullquote {
  font-family: var(--font-editorial);
  font-size: var(--type-h2);
  line-height: 1.4;
  color: var(--color-black);
  font-style: italic;
  padding: var(--space-3) 0 var(--space-3) var(--space-7);
  border-top: var(--border-thin);
  border-bottom: var(--border-thin);
  margin: var(--space-5) 0;
  max-width: 540px;
}

.pullquote-secondary {
  font-family: var(--font-editorial);
  font-size: 24px;
  line-height: 1.4;
  color: var(--color-black);
  font-style: italic;
  padding: var(--space-1) 0 var(--space-1) var(--space-4);
  border-left: 1.5px solid var(--color-clay);
  margin: var(--space-4) 0;
  max-width: 520px;
}

@media (max-width: 768px) {
  .pullquote { padding-left: var(--space-3); font-size: 20px; }
  .pullquote-secondary { font-size: 19px; padding-left: var(--space-3); }
}

/* === CARD GRIDS === */
.card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

@media (max-width: 768px) {
  .card-grid { grid-template-columns: 1fr; }
}

/* Guardian System cards (Verdigris Light) */
.guardian-card {
  background: var(--color-verdigris-light);
  padding: 22px 24px 24px;
  border-radius: var(--radius-default);
}

.guardian-card .num {
  font-size: var(--type-label);
  color: var(--color-verdigris);
  letter-spacing: 0.1em;
  font-weight: 500;
  margin: 0 0 var(--space-1);
  text-transform: uppercase;
}

.guardian-card .name {
  font-size: var(--type-h3);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-black);
  margin: 0 0 10px;
}

.guardian-card .desc {
  font-size: var(--type-card-body);
  line-height: 1.55;
  color: var(--color-black);
  margin: 0 0 14px;
}

.guardian-card .principle {
  font-family: var(--font-editorial);
  font-size: var(--type-card-body);
  line-height: 1.45;
  color: var(--color-verdigris);
  font-style: italic;
  margin: 0;
}

/* Founders cards (Parchment) */
.founder-card {
  background: var(--color-parchment);
  padding: 24px 26px;
  border-radius: var(--radius-default);
}

.founder-card .function {
  font-size: var(--type-label);
  color: var(--color-mid-grey);
  letter-spacing: 0.1em;
  font-weight: 500;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.founder-card .desc {
  font-size: var(--type-card-body);
  line-height: 1.55;
  color: var(--color-black);
  margin: 0 0 16px;
}

.founder-card .archetype {
  font-family: var(--font-editorial);
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-charcoal);
  font-style: italic;
  margin: 0;
}

/* === EMAIL CAPTURE (Section 5 of Home) === */
.email-capture {
  padding: var(--space-10) 0;
  border-top: var(--border-thin);
}

.email-capture h2 {
  font-family: var(--font-editorial);
  font-size: 36px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.2;
  color: var(--color-black);
  margin: 0 0 var(--space-2);
  letter-spacing: -0.005em;
}

.email-capture p {
  font-size: var(--type-body);
  color: var(--color-black);
  margin: 0 0 var(--space-3);
  max-width: var(--reading-max);
}

.email-form {
  display: flex;
  gap: var(--space-1);
  max-width: 460px;
}

.email-form input {
  flex: 1;
  background: var(--color-warm-white);
  border: 1px solid var(--color-light-grey);
  padding: 12px 14px;
  border-radius: var(--radius-default);
  font-size: 14px;
  color: var(--color-black);
  font-family: var(--font-sans);
  transition: border-color var(--duration-quick) var(--ease-standard);
}

.email-form input:focus {
  outline: none;
  border-color: var(--color-verdigris);
}

.email-form button {
  background: var(--color-verdigris);
  color: var(--color-warm-white);
  padding: 12px 22px;
  border-radius: var(--radius-default);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--duration-quick) var(--ease-standard);
}

.email-form button:hover { background: var(--color-verdigris-deep); }

@media (max-width: 768px) {
  .email-form { flex-direction: column; }
  .email-form button { width: 100%; }
  .email-capture h2 { font-size: 28px; }
}

/* === FOOTER === */
.site-footer {
  border-top: var(--border-thin);
}

.site-footer .footer-main {
  padding: var(--space-7) 0 var(--space-5);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  align-items: start;
}

.footer-signup h3 {
  font-family: var(--font-editorial);
  font-size: 26px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.25;
  color: var(--color-black);
  margin: 0 0 var(--space-1);
}

.footer-signup p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-charcoal);
  margin: 0 0 18px;
  max-width: 320px;
}

.footer-signup .email-form { max-width: 340px; }

.footer-contact .eyebrow {
  font-size: var(--type-label);
  color: var(--color-mid-grey);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 500;
  margin: 0 0 var(--space-2);
}

.footer-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-2);
}

.footer-contact-grid .item {
  font-size: var(--type-label);
  color: var(--color-mid-grey);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 0 4px;
}

.footer-contact-grid a {
  font-size: 14px;
  color: var(--color-clay);
  text-decoration: none;
  transition: color var(--duration-quick) var(--ease-standard);
}

.footer-contact-grid a:hover { color: var(--color-verdigris); }

.footer-bottom {
  padding: var(--space-3) 0;
  border-top: var(--border-thin);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--color-mid-grey);
}

.footer-bottom .left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.footer-bottom .left .wordmark-small {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--color-black);
  letter-spacing: 0.5px;
}

.footer-bottom .right { display: flex; gap: 20px; }

.footer-bottom a {
  color: var(--color-clay);
  text-decoration: none;
  transition: color var(--duration-quick) var(--ease-standard);
}

.footer-bottom a:hover { color: var(--color-verdigris); }

@media (max-width: 768px) {
  .site-footer .footer-main {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .footer-contact-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .footer-contact-grid .item-row {
    padding: 10px 0;
    border-bottom: var(--border-thin);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }
  .footer-contact-grid .item-row:last-child { border-bottom: none; }
  .footer-bottom .left .wordmark-small { display: none; }
}

/* === ACCESSIBILITY === */
:focus-visible {
  outline: 2px solid var(--color-verdigris);
  outline-offset: 2px;
}

.email-form input:focus-visible {
  outline: none;
  border-color: var(--color-verdigris);
  box-shadow: 0 0 0 3px var(--color-verdigris-light);
}

@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;
  }
}

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

/* === UTILITY === */
.lead-line {
  font-family: var(--font-editorial);
  font-style: italic;
  font-size: 18px;
  color: var(--color-black);
  line-height: 1.55;
  max-width: var(--reading-max);
  margin: 0 0 var(--space-4);
}

.intro-text {
  margin: 0 0 var(--space-4);
}