/* Temporary reusable WIP pages.
   Shared header and horizontal axes remain system-owned; this file owns only
   the restrained under-construction composition. */
.construction-main{
  min-height:100svh;
}

.construction-page{
  min-height:100svh;
  align-items:center;
  padding-top:clamp(10rem,18vh,13rem);
  padding-bottom:clamp(4rem,9vh,7rem);
}

.construction-copy{
  grid-column:1;
  align-self:center;
  max-width:34rem;
}

.construction-kicker{
  margin:0 0 1.6rem;
  /* WIP state is intentionally muted; metric treatment matches the
     established compact/interior Contact kicker rather than inventing a
     lighter temporary type style. */
  color:var(--muted);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.23em;
  text-transform:uppercase;
}

.construction-headline{
  margin:0;
  max-width:8ch;
  font-family:"CHARUS Outfit",Arial,Helvetica,sans-serif;
  font-size:clamp(3rem,5.2vw,5.8rem);
  font-weight:var(--headline-weight);
  line-height:.98;
  letter-spacing:-.035em;
  -webkit-text-stroke:var(--headline-grade-stroke) currentColor;
}

.construction-final{
  white-space:nowrap;
}

.construction-dot{
  display:inline-block;
  width:.14em;
  height:.14em;
  margin-left:.20em;
  border-radius:50%;
  vertical-align:-.015em;
  background:var(--accent);
}

.construction-text{
  margin:2rem 0 0;
  max-width:30rem;
  color:var(--copy);
  font-size:clamp(1rem,1.15vw,1.12rem);
  font-weight:var(--body-copy-weight);
  letter-spacing:var(--body-copy-tracking);
  line-height:1.6;
  -webkit-text-stroke:var(--body-grade-stroke) currentColor;
}

.construction-visual{
  grid-column:2;
  position:relative;
  justify-self:stretch;
  align-self:center;
  width:min(100%,34rem);
  aspect-ratio:1.18;
  margin-left:auto;
}

.construction-frame,
.construction-axis,
.construction-node{
  position:absolute;
}

.construction-frame{
  border:1px solid color-mix(in srgb,var(--hair) 82%,transparent);
}
.construction-frame--outer{
  inset:9% 4% 8% 12%;
}
.construction-frame--middle{
  inset:24% 20% 22% 2%;
}
.construction-frame--inner{
  inset:39% 34% 36% 28%;
  border-color:color-mix(in srgb,var(--ink) 23%,var(--hair));
}

.construction-axis{
  background:color-mix(in srgb,var(--hair) 86%,transparent);
}
.construction-axis--horizontal{
  left:0;
  right:0;
  top:55%;
  height:1px;
}
.construction-axis--vertical{
  top:0;
  bottom:0;
  left:61%;
  width:1px;
}

.construction-node{
  width:8px;
  height:8px;
  border-radius:50%;
  transform:translate(-50%,-50%);
}
.construction-node--muted{
  left:28%;
  top:55%;
  background:color-mix(in srgb,var(--ink) 45%,var(--hair));
}
.construction-node--accent{
  left:61%;
  top:55%;
  width:10px;
  height:10px;
  background:var(--accent);
  box-shadow:0 0 0 7px color-mix(in srgb,var(--accent) 10%,transparent);
}

@media(max-width:920px){
  .construction-page{
    align-content:center;
    row-gap:clamp(3.5rem,8vh,5rem);
    padding-top:clamp(9rem,17vh,11rem);
  }
  .construction-copy,
  .construction-visual{
    grid-column:1;
  }
  .construction-kicker{
    letter-spacing:.18em;
  }
  .construction-headline{
    max-width:9ch;
    font-size:clamp(2.8rem,11vw,4.8rem);
  }
  .construction-visual{
    justify-self:start;
    width:min(100%,30rem);
    margin:0;
  }
}

@media(max-width:520px){
  .construction-page{
    padding-bottom:3.5rem;
  }
  .construction-text{
    max-width:85%;
  }
}