/* ==========================================================================
   CT Alloy — coming-soon page

   Standalone and self-contained: this folder is uploaded INSTEAD of dist/,
   so it shares no stylesheet with the main site. The tokens and the hero
   typography below are copied from site.css / home.css deliberately, so the
   holding page and the real site look like the same brand when the swap
   happens.

   Zero JavaScript. A holding page that can break is worse than a plain one.
   ========================================================================== */

:root {
  --ink-900: #05060a;
  --steel-500: #6b7178;
  --silver-100: #eef1f6;

  --sans: 'Space Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

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

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink-900);
}

body {
  font-family: var(--sans);
  color: var(--silver-100);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--silver-100); color: var(--ink-900); }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--silver-100);
  outline-offset: 4px;
}

/* ------------------------------------------------------------- the stage */

.cs {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;          /* so mobile browser chrome cannot crop it */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* The poster doubles as the background, which is what shows under reduced
     motion and if autoplay is refused. */
  background: var(--ink-900) url("../img/forge-poster.webp") center / cover no-repeat;
}

.cs__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border: 0;
}

/* Two overlays, same job as the home hero: keep the wordmark legible over a
   bright, moving, high-contrast shop floor. The forge is the brightest thing
   in the clip and it sits centre-left, which is where the type sits too. */
.cs__grade,
.cs__vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cs__grade {
  background: linear-gradient(
    180deg,
    rgba(5, 6, 10, .88) 0%,
    rgba(5, 6, 10, .55) 26%,
    rgba(5, 6, 10, .62) 58%,
    rgba(5, 6, 10, .94) 100%
  );
}
/* The second gradient is aimed at the bottom-right corner on purpose: the
   source clip has a four-pointed generator watermark baked in at roughly
   (91%, 83%). It cannot be removed without re-encoding, so it is sunk into
   the corner falloff instead. If the clip is ever re-cut to crop it out, this
   layer can go back to the single radial. */
.cs__vignette {
  background:
    radial-gradient(70% 60% at 88% 84%, rgba(5, 6, 10, .82) 0%, rgba(5, 6, 10, 0) 60%),
    radial-gradient(120% 90% at 50% 45%, rgba(5, 6, 10, 0) 30%, rgba(5, 6, 10, .75) 100%);
}

/* ---------------------------------------------------------------- layout */

.cs__body,
.cs__foot {
  position: relative;
  z-index: 2;
  padding-left: clamp(24px, 7vw, 96px);
  padding-right: clamp(24px, 7vw, 96px);
}

/* The vertical rhythm is keyed to vh, not vw. The constraint on this page is
   the viewport's HEIGHT — the whole thing is meant to sit in one screen with
   no scrollbar — so the gaps collapse on a short window instead of pushing
   the footer past the fold. */
.cs__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(24px, 4vh, 60px);
  padding-bottom: clamp(24px, 4vh, 60px);
  max-width: 900px;
}

.cs__foot {
  padding-bottom: clamp(18px, 2.6vh, 36px);
}
.cs__foot p {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(238, 241, 246, .38);
}

/* ------------------------------------------------------------------ type */

.cs__eyebrow-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.cs__eyebrow-line { width: 46px; height: 1px; background: var(--silver-100); flex: none; }
.cs__eyebrow {
  font-family: var(--mono);
  font-size: clamp(10px, 1.2vw, 13px);
  letter-spacing: .5em;
  text-transform: uppercase;
  color: var(--steel-500);
}

/* The headline IS the logo — the typed "CT ALLOY" wordmark it replaced is
   gone, along with the spinning rim that stood in for the O. The <h1> is kept
   so the page still has one heading, and the image's alt text is what gives
   it a name.

   Sized by WIDTH here, unlike the nav: it is standing in for a 127px headline
   rather than sitting in a bar, so it needs to hold that line's visual weight.
   The ceiling stays at or below 460px, the file's own width: past that the
   browser is enlarging a bitmap and the edges go soft for nothing. Below it
   is free — downscaling only ever sharpens. */
.cs__h1 {
  margin: 0;
  line-height: 0;
}
.cs__logo {
  display: block;
  width: clamp(190px, 24vw, 340px);
  height: auto;
  /* Same lift the typed headline had, so it still sits off the shop floor. */
  filter: drop-shadow(0 24px 60px rgba(0, 0, 0, .65));
}

.cs__lede {
  margin: clamp(26px, 3.4vw, 40px) 0 0;
  font-size: clamp(22px, 3.4vw, 40px);
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -.01em;
  color: var(--silver-100);
  max-width: 16ch;
}

.cs__sub {
  margin: 16px 0 0;
  font-size: clamp(15px, 1.7vw, 19px);
  line-height: 1.6;
  color: rgba(238, 241, 246, .72);
  max-width: 52ch;
}

/* ----------------------------------------------------------------- pills */

.cs__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(26px, 3vw, 36px);
}
.cs__pill {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(238, 241, 246, .72);
  background: rgba(5, 6, 10, .45);
  border: 1px solid rgba(238, 241, 246, .22);
  border-radius: 100px;
  padding: 11px 16px;
}

/* --------------------------------------------------------------- contact */

.cs__contact { margin-top: clamp(32px, 4vw, 48px); }
.cs__contact-label {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(238, 241, 246, .42);
}
.cs__mail {
  display: inline-block;
  font-size: clamp(17px, 2vw, 22px);
  font-weight: 600;
  letter-spacing: -.01em;
  text-decoration: none;
  color: var(--silver-100);
  border-bottom: 1px solid rgba(238, 241, 246, .35);
  padding-bottom: 3px;
  transition: border-color .25s ease, color .25s ease;
}
.cs__mail:hover { border-bottom-color: var(--silver-100); }

/* ------------------------------------------------------------ responsive */

@media (max-width: 900px) {
  /* The forge is centre-frame and bright; on a narrow screen the type lands
     right on top of it, so the scrim goes heavier rather than the layout
     changing. */
  .cs__grade {
    background: linear-gradient(
      180deg,
      rgba(5, 6, 10, .9) 0%,
      rgba(5, 6, 10, .68) 22%,
      rgba(5, 6, 10, .78) 55%,
      rgba(5, 6, 10, .96) 100%
    );
  }
}

@media (max-width: 560px) {
  .cs__eyebrow { letter-spacing: .34em; }
  .cs__lede { max-width: none; }
  .cs__pill { padding: 9px 13px; letter-spacing: .14em; }
}

/* Someone who asked for less motion gets the still frame, not a looping
   factory floor. The poster is already the element's background. */
@media (prefers-reduced-motion: reduce) {
  .cs__video { display: none; }
  * { transition-duration: .01ms !important; }
}