/* uc.css — Under Restoration · shared centered template
   Pairs with styles/tokens.css for variables + fonts. */

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--sans);
  color: var(--ink-70);
  background: var(--warm-white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 56px var(--gutter);
}
a { color: inherit; text-decoration: none; }
::selection { background: var(--sandstone); color: var(--soft-black); }

.uc-wrap {
  width: 100%; max-width: 660px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}

.uc-wrap h1 {
  font-family: var(--serif); color: var(--soft-black);
  font-weight: 500; letter-spacing: -0.02em; line-height: 1.03;
  font-size: clamp(40px, 6vw, 74px);
  margin: 0; text-wrap: balance; max-width: 16ch;
}
.uc-wrap h1 .accent { font-style: italic; color: var(--bronze); }

.uc-lede {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(18px, 1.7vw, 23px); line-height: 1.5; color: var(--ink-70);
  letter-spacing: -0.005em; margin: 26px 0 0; max-width: 50ch; text-wrap: pretty;
}

/* the centrepiece animation sits here */
.uc-anim {
  margin: 46px 0 0; width: 100%;
  display: flex; align-items: center; justify-content: center;
}

/* status caption (retained: "Restoration in progress" / stage) */
.uc-stage {
  display: flex; align-items: center; justify-content: center; gap: 13px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; margin-top: 20px;
}
.uc-stage .s1 { color: var(--ink-55); display: inline-flex; align-items: center; gap: 9px; }
.uc-stage .s1::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--bronze);
  box-shadow: 0 0 0 0 rgba(154,122,69,0.45); animation: ucpulse 2.6s var(--ease) infinite;
}
.uc-stage .dt { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-25); }
.uc-stage .s2 { color: var(--bronze); }
@keyframes ucpulse {
  0%   { box-shadow: 0 0 0 0 rgba(154,122,69,0.45); }
  70%  { box-shadow: 0 0 0 9px rgba(154,122,69,0); }
  100% { box-shadow: 0 0 0 0 rgba(154,122,69,0); }
}

/* contact */
.uc-contact {
  margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--rule);
  display: flex; gap: 64px; flex-wrap: wrap; justify-content: center;
  width: 100%; max-width: 520px;
}
.uc-contact .m { display: flex; flex-direction: column; gap: 7px; align-items: center; }
.uc-contact .k {
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-40); font-weight: 500;
}
.uc-contact .v { font-family: var(--serif); font-size: 21px; color: var(--soft-black); }
.uc-contact .v a:hover { color: var(--bronze); }
.uc-contact .sub {
  font-family: var(--mono); font-size: 10px; color: var(--ink-40);
  letter-spacing: 0.06em; text-transform: uppercase;
}

@media (max-width: 560px) {
  .uc-contact { gap: 36px; }
}

/* tool credit — names the set's four tools */
.uc-tools {
  margin-top: 16px; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.10em; text-transform: uppercase; color: var(--ink-40);
  max-width: 480px; line-height: 1.7;
}
.uc-tools b { color: var(--ink-55); font-weight: 500; }

/* Reduced motion: every animated element's BASE style is its visible end-state,
   so disabling animation leaves a complete, legible composition. */
@media (prefers-reduced-motion: reduce) {
  *, *::before { animation: none !important; }
}