/* Copper Mill Studio: Coming soon page, Brand Kit 2.8 (ink ground, copper edge). Scoped to body.coming-soon. */

body.coming-soon {
  --k28-paper: #F7F3EA;
  --k28-ink: #282623;
  --k28-copper: #9A6247;
  --k28-copper-light: #B58B74;
  --k28-muted: #A8A097;
  --k28-edge: clamp(4px, .45vw, 7px);
  --k28-gutter: clamp(24px, 6vw, 96px);
  --k28-ease: cubic-bezier(.2, .7, .2, 1);

  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100svh;
  margin: 0;
  border-left: var(--k28-edge) solid var(--k28-copper);
  background: var(--k28-ink);
  color: var(--k28-paper);
  font-family: "Manrope", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  color-scheme: dark;
}

body.coming-soon :focus-visible { outline: 2px solid var(--k28-copper-light); outline-offset: 4px; }

.cs-main {
  display: grid;
  place-items: center;
  align-content: center;
  gap: clamp(28px, 4.5vh, 48px);
  padding: clamp(56px, 10vh, 120px) var(--k28-gutter);
  text-align: center;
}

.cs-mark { display: block; width: clamp(200px, 24vw, 340px); height: auto; }

.cs-rule { width: 40px; height: 2px; margin: 0; border: 0; background: var(--k28-copper-light); }

.cs-title { margin: 0; line-height: 0; }
.cs-title img { display: block; width: clamp(200px, 19vw, 272px); height: auto; }

.cs-descriptor {
  margin: -8px 0 0;
  color: var(--k28-copper-light);
  font-size: clamp(11px, .8vw, 12px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.cs-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 28px;
  padding: 0 var(--k28-gutter) clamp(16px, 3vw, 28px);
  color: var(--k28-muted);
  font-size: 14px;
  line-height: 1.5;
}
.cs-footer p { margin: 0; }
.cs-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
}
.cs-footer a:hover { color: var(--k28-paper); text-decoration-color: var(--k28-copper-light); }

body.coming-soon .text-button.access {
  align-items: center;
  justify-content: center;
  padding: 0 2px;
  color: var(--k28-muted);
  font: 400 14px/1.5 "Manrope", "Helvetica Neue", Arial, sans-serif;
  opacity: .8;
}
body.coming-soon .text-button.access:hover { opacity: 1; color: var(--k28-paper); }

.cs-reveal { animation: cs-rise .9s var(--k28-ease) both; }
.cs-reveal-2 { animation-delay: .12s; }
.cs-reveal-3 { animation-delay: .24s; }
@keyframes cs-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

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