/*
---------------------------------------------------------------
   The Neighborhood Collaborative — coming soon
   ---------------------------------------------------------------
*/

:root {
  /* Brand palette, sampled from the identity swatches */

  --teal: #43626B;
  --forest: #2E3419;
  --plum: #6B566F;
  --sage: #7D8462;
  --terracotta: #BE7050;
  --orange: #C4763C;

  /* Applied roles */

  --bg: #FFFFFF;
  --ink: #2E3419;
  --ink-soft: #4A5340;
  --accent: #43626B;
  --hairline: #DCDCD4;

  /* Type stacks: the real brand face first, embeddable fallback second */

  --font-display: Palatino, "Palatino Linotype", "Book Antiqua", Gelasio, Georgia, serif;
  --font-body: "Avenir Next", Avenir, "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-script: "Spanish Signature", Parisienne, cursive;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;

  display: flex;
  flex-direction: column;

  min-height: 100dvh;
  margin: 0;

  color: var(--ink);
  background: var(--bg);

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Centering ------------------------------------------------- */

.stage {
  display: flex;
  align-items: center;
  flex: 1;
  justify-content: center;

  padding: 2.5rem 1.5rem;
}

.card {
  width: 100%;
  max-width: 30rem;

  animation: rise 0.7s ease-out both;
  text-align: center;
}

@keyframes rise {

from {
  transform: translateY(0.75rem);

  opacity: 0;
}

to {
  transform: none;

  opacity: 1;
}

}

/* --- Logo ------------------------------------------------------ */

.logo {
  display: block;

  width: 100%;
  max-width: 40rem;
  height: auto;

  /* Keeps the mark from pushing the page into a scroll on short viewports. */

  max-height: 60vh;
  margin: 0 auto;

  object-fit: contain;
}

/* --- Eyebrow --------------------------------------------------- */

.status {
  line-height: 1;

  margin: 1.5rem 0 0;
}

/*
The logo already carries a script 'The' — this line stays a single word
   so the flourish reads as an echo of the mark,
 not a repeat of it.
*/

.status .script {
  font-family: var(--font-script);
  font-size: clamp(1.5rem, 6vw, 1.875rem);
  font-weight: 400;

  color: var(--sage);
}

/* --- Rule ------------------------------------------------------ */

.rule {
  width: 3.5rem;
  height: 1px;
  margin: 1.5rem auto;

  border: 0;
  background: var(--terracotta);
}

/* --- Headline -------------------------------------------------- */

.headline {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 11vw, 3.25rem);
  font-weight: 400;
  line-height: 1.1;

  margin: 0;

  letter-spacing: 0.01em;

  color: var(--forest);
}

.sub {
  font-size: 1rem;

  max-width: 26rem;
  margin: 1.25rem auto 0;

  text-wrap: pretty;

  color: var(--ink-soft);
}

/* --- Contact --------------------------------------------------- */

.contact {
  font-size: 0.9375rem;

  margin: 2rem 0 0;

  letter-spacing: 0.02em;
}

.contact a {
  padding-bottom: 0.15em;

  transition: color 0.2s ease, border-color 0.2s ease;
  text-decoration: none;

  color: var(--accent);
  border-bottom: 1px solid rgba(67, 98, 107, 0.35);
}

.contact a:hover,
.contact a:focus-visible {
  color: var(--terracotta);
  border-bottom-color: var(--terracotta);
}

/* --- Footer ---------------------------------------------------- */

.footer {
  font-size: 0.75rem;

  padding: 1.5rem;

  text-align: center;
  letter-spacing: 0.06em;

  opacity: 0.65;
  color: var(--ink-soft);
}

.footer p {
  margin: 0;
}

/* --- Focus ----------------------------------------------------- */

:focus-visible {
  border-radius: 2px;
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

/* --- Larger screens -------------------------------------------- */

@media(min-width: 40rem) {
  .card {
    max-width: 34rem;
  }

  .logo {
    max-width: 25rem;
  }

  .status {
    font-size: 0.8125rem;
  }
}

/* --- Short viewports (landscape phones, small laptops) ---------- */

@media(max-height: 46rem) {
  .stage {
    padding: 1.5rem;
  }

  .status {
    margin-top: 1.25rem;
  }

  .rule {
    margin: 1.125rem auto;
  }

  .sub {
    margin-top: 0.875rem;
  }

  .contact {
    margin-top: 1.25rem;
  }

  .footer {
    padding: 1rem;
  }
}

/* --- Motion preference ----------------------------------------- */

@media(prefers-reduced-motion: reduce) {
  .card {
    animation: none;
  }

  * {
    transition-duration: 0.01ms !important;
  }
}

/* --- Print ----------------------------------------------------- */

@media print {

.footer {
  display: none;
}

body {
  color: #000;
}

}