/* Techarcus - coming soon holding page.
   Implements "Techarcus Coming Soon.dc.html". Self-contained: the main site's
   stylesheets live outside the published root, so nothing is shared. */

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

:root {
  /* 18dv2 tokens used here */
  --design: #bae6fd;
  --build:  #0ea5e9;
  --ship:   #3b82f6;
  --n-950:  #070d18;
  --n-400:  #8896ae;
  --n-200:  #c7d2e2;
  --mist:   #f2f6ff;
  --tint:   #e0f2fe;
  /* The kit's divider/underline colour. Not one of the 19 tokens - see README. */
  --hairline: #4a679e;

  --font-display: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

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

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--n-950);
  color: var(--mist);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* Content centred, footer pinned to the last row - a grid rather than the
     kit's absolute footer, so the two can never overlap on a short screen. */
  display: grid;
  grid-template-rows: 1fr auto;
  align-items: center;
  padding: clamp(40px, 8vh, 60px) clamp(20px, 5vw, 40px) clamp(24px, 4vh, 30px);
  position: relative;
  isolation: isolate;
}

/* 48px measuring grid, as on the main site */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg,  rgba(242, 246, 255, .022) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(90deg, rgba(242, 246, 255, .022) 0 1px, transparent 1px 48px);
}

/* Azure-to-sapphire bloom behind the lockup */
body::after {
  content: "";
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(1000px, 150vw);
  height: min(560px, 90vh);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(14, 165, 233, .15), rgba(59, 130, 246, .06), transparent);
  filter: blur(80px);
  z-index: -1;
  pointer-events: none;
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(22px, 4vh, 30px);
}

.lockup { display: flex; align-items: center; gap: clamp(14px, 2.5vw, 20px); }
.lockup svg { flex: none; width: clamp(54px, 9vw, 76px); height: auto; }
.lockup .words { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }

.wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 7vw, 52px);
  letter-spacing: -0.02em;
  line-height: 1;
}

.tagline {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(9.5px, 1.6vw, 12px);
  letter-spacing: 0.2em;
  /* <p> default margin would add 1em top and bottom and stretch the lockup */
  margin: 0 0 0 2px;
  white-space: nowrap;
}
.tagline .d { color: var(--design); }
.tagline .b { color: var(--build); }
.tagline .s { color: var(--ship); }

.rule { width: 64px; height: 1px; background: var(--hairline); border: 0; margin: 0; }

.status { display: flex; flex-direction: column; align-items: center; gap: 16px; }

.eyebrow {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--n-400);
  margin: 0;
}

.blurb {
  font-size: clamp(16px, 2.2vw, 18px);
  line-height: 1.6;
  color: var(--n-200);
  max-width: 440px;
  text-wrap: pretty;
  margin: 0;
}

.contact {
  font-weight: 600;
  font-size: clamp(15px, 2.4vw, 17px);
  color: var(--design);
  text-decoration: none;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 3px;
  transition: color .18s ease, border-color .18s ease;
}
.contact:hover { color: var(--tint); border-color: var(--tint); }
.contact:focus-visible { outline: 2px solid var(--build); outline-offset: 4px; border-radius: 2px; }

footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 12.5px;
  color: var(--n-400);
}
footer .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--hairline); }
footer .handle { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.06em; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}