/* forestcity.design — holding page
   Brand: leaf #195C3A, ink #24292B. Everything else derives from those. */

:root {
  --paper:      #F7F6F2;
  --paper-deep: #EFEDE6;
  --ink:        #24292B;
  --muted:      #6B7168;
  --brand-leaf: #195C3A;
  --brand-ink:  #24292B;
  --rule:       rgba(25, 92, 58, 0.28);
  --glow:       rgba(25, 92, 58, 0.07);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:      #101410;
    --paper-deep: #0A0D0A;
    --ink:        #E7E9E3;
    --muted:      #8B948A;
    /* #195C3A is far too dark to read against a near-black ground. */
    --brand-leaf: #5CA87B;
    --brand-ink:  #E7E9E3;
    --rule:       rgba(92, 168, 123, 0.30);
    --glow:       rgba(92, 168, 123, 0.08);
  }
}

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

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

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 4vh 1.5rem 0;
  background: var(--paper);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Ambient wash behind the lockup — gives the flat ground some depth
   without shipping an image. */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(60rem 40rem at 50% 38%, var(--glow), transparent 70%),
    radial-gradient(40rem 30rem at 50% 100%, var(--paper-deep), transparent 65%);
}

.stage {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  max-width: 34rem;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- lockup ---------------------------------------------------------- */

.lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 1.25rem);
}

.mark svg {
  display: block;
  width: clamp(200px, 48vw, 320px);
  height: auto;
}

.wordmark {
  margin: 0;
  font-size: 0; /* the wordmark is drawn, not set */
}

.wordmark svg {
  display: block;
  width: clamp(200px, 48vw, 320px);
  height: auto;
}

/* ---- divider --------------------------------------------------------- */

.rule {
  width: 3.5rem;
  height: 0;
  margin: clamp(2.2rem, 6vw, 3.2rem) 0 clamp(1.6rem, 4vw, 2.2rem);
  border: 0;
  border-top: 1px solid var(--rule);
}

/* ---- copy ------------------------------------------------------------ */

.lede {
  margin: 0;
  font-size: clamp(1.2rem, 1rem + 1vw, 1.55rem);
  font-weight: 500;
  letter-spacing: -0.011em;
  line-height: 1.35;
  text-wrap: balance;
}

.sub {
  margin: 0.85rem 0 0;
  color: var(--muted);
  font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem);
  text-wrap: balance;
}

.contact {
  margin: clamp(2rem, 5vw, 2.8rem) 0 0;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}

.contact a {
  color: var(--brand-leaf);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  border-radius: 3px;
  transition: text-decoration-color 160ms ease, color 160ms ease;
}

.contact a:hover,
.contact a:focus-visible {
  text-decoration-color: currentColor;
}

.contact a:focus-visible {
  outline: 2px solid var(--brand-leaf);
  outline-offset: 4px;
}

/* ---- footer ---------------------------------------------------------- */

.foot {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  padding: 2.5rem 0 1.75rem;
  color: var(--muted);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
}

/* ---- entrance -------------------------------------------------------- */

/* The mark's paths carry pathLength="1", so one dash length fits every
   path regardless of its real geometry. */
.mark path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 1100ms cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.mark .leaf  path { animation-delay: 120ms; }
.mark .skyline path { animation-delay: 420ms; }

.wordmark svg,
.rule,
.lede,
.sub,
.contact,
.foot {
  opacity: 0;
  animation: rise 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.wordmark svg { animation-delay: 1150ms; }
.rule         { animation-delay: 1320ms; }
.lede         { animation-delay: 1420ms; }
.sub          { animation-delay: 1520ms; }
.contact      { animation-delay: 1640ms; }
.foot         { animation-delay: 1780ms; }

@keyframes draw {
  to { stroke-dashoffset: 0; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(0.6rem); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mark path {
    stroke-dashoffset: 0;
    animation: none;
  }
  .wordmark svg, .rule, .lede, .sub, .contact, .foot {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* Very short viewports (landscape phones). The whole lockup has to fit in
   about 390px of height without the page scrolling. */
@media (max-height: 560px) {
  body { padding-top: 1.25rem; }
  .lockup { gap: 0.6rem; }
  .mark svg { width: clamp(112px, 24vh, 180px); }
  .wordmark svg { width: clamp(170px, 30vw, 230px); }
  .rule { margin: 1.1rem 0 0.9rem; }
  .lede { font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem); }
  .sub { margin-top: 0.6rem; }
  .contact { margin-top: 1.1rem; }
  .foot { padding: 0.9rem 0 0.75rem; }
}