/* ═══════════════════════════════════════════════════
   aspol — Off-white institutional palette
   ═══════════════════════════════════════════════════ */

@import url('./base.css');

:root {
  /* Type scale */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.82rem + 0.3vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);

  /* Spacing */
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* Fonts */
  --font-body: 'Satoshi', 'Helvetica Neue', sans-serif;
  --font-mono: 'JetBrains Mono', 'Consolas', monospace;

  /* Palette — warm off-white */
  --color-bg:         #fbf6f1;
  --color-border:     #e0dbd5;
  --color-text:       #333638;
  --color-text-muted: #7a7672;
  --color-text-faint: #a09b96;

  /* Content widths */
  --content-wide: 1100px;

  /* Easing */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  overflow-x: hidden;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

a {
  color: inherit;
  text-decoration: none;
}



.page-container {
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: 0 clamp(var(--space-6), 5vw, var(--space-16));
}

/* ══════════════════════════
   HERO
   ══════════════════════════ */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(var(--space-8), 5vw, var(--space-12)) 0 clamp(var(--space-4), 2vw, var(--space-6));
}

.hero__logo {
  margin-bottom: var(--space-6);
}

.hero__logo-img {
  height: clamp(60px, 8vw, 90px);
  width: auto;
  display: block;
}

/* Minimal version: vertically centred */
.hero--minimal {
  flex: 1;
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
}

.hero__tagline {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--color-text);
  letter-spacing: 0.02em;
}

/* ══════════════════════════
   ERAS — Three-column grid
   ══════════════════════════ */

.eras {
  padding: clamp(var(--space-4), 2vw, var(--space-6)) 0;
}

.eras__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  align-items: start;
}

.era {
  padding: var(--space-6) var(--space-8);
  border-right: 1px solid var(--color-border);
}

.era:first-child {
  padding-left: var(--space-4);
}

.era:last-child {
  border-right: none;
  padding-right: var(--space-4);
}

/* On mobile, reset first/last padding so all eras align */

.era__label {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  display: block;
  margin-bottom: var(--space-3);
}

.era__heading {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-3);
  line-height: 1.25;
}

.era__body {
  font-size: var(--text-sm);
  line-height: 1.75;
  color: var(--color-text-muted);
}

.era__body strong {
  color: var(--color-text);
  font-weight: 500;
}

/* ══════════════════════════
   CODA
   ══════════════════════════ */

.coda {
  padding: clamp(var(--space-6), 3vw, var(--space-10)) var(--space-6);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.coda__divider {
  border: none;
  border-top: 1px solid var(--color-border);
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: 0 clamp(var(--space-6), 5vw, var(--space-16));
  width: 90%;
}

.coda__statement {
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--color-text);
  line-height: 1.4;
  max-width: 32ch;
  letter-spacing: 0.02em;
}

/* ══════════════════════════
   FOOTER
   ══════════════════════════ */

.site-footer {
  padding: var(--space-4) var(--space-6) var(--space-4);
  text-align: center;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-top: auto;
}

.site-footer__contact,
.site-footer__contact span,
.site-footer__contact .__cf_email__ {
  font-family: var(--font-mono) !important;
  font-size: var(--text-xs) !important;
  font-weight: 400 !important;
  color: var(--color-text-faint) !important;
  text-decoration: none !important;
  letter-spacing: 0.03em;
  display: block;
}

.site-footer__contact:hover,
.site-footer__contact:hover span,
.site-footer__contact:hover .__cf_email__ {
  color: var(--color-text-muted) !important;
}

.site-footer__copy {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-faint);
}

/* ══════════════════════════
   RESPONSIVE
   ══════════════════════════ */

@media (max-width: 768px) {
  .hero__logo-img {
    height: 50px;
  }

  .hero__tagline {
    font-size: var(--text-base);
  }

  .eras__grid {
    grid-template-columns: 1fr;
  }

  .eras {
    padding-left: clamp(var(--space-6), 5vw, var(--space-16));
    padding-right: clamp(var(--space-6), 5vw, var(--space-16));
    border-top: 1px solid var(--color-border);
  }

  .era,
  .era:first-child,
  .era:last-child {
    padding: var(--space-6) 0;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }

  .era:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .coda__statement {
    font-size: var(--text-base);
  }
}