/* The Undeserving Apparel Co. — coming soon page */

:root{
  --ink:        #06070a;   /* deepest shadow */
  --bone:       #f3f0e9;   /* logo white / primary text */
  --ash:        #b9b4ab;   /* secondary text */
  --ember:      #c79a56;   /* light-through-the-clouds gold */
  --hairline:   rgba(243,240,233,.38);
  --field-bg:   rgba(6,7,10,.55);

  --track-wide: .42em;
  --track-mid:  .30em;
}

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

html,body{ height:100%; }

body{
  margin:0;
  background:var(--ink);
  color:var(--bone);
  font-family:"Jost", "Helvetica Neue", Arial, sans-serif;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- background photograph ---------- */

.backdrop{
  position:fixed;
  inset:0;
  z-index:0;
}

.backdrop img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:62% 50%;
  display:block;
}

/* keeps the type legible over the bright sunburst on small screens */
.backdrop::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(70% 55% at 42% 46%, rgba(6,7,10,.70) 0%, rgba(6,7,10,.28) 55%, transparent 80%),
    linear-gradient(to bottom, rgba(6,7,10,.45) 0%, transparent 28%, transparent 62%, rgba(6,7,10,.60) 100%);
}

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

.stage{
  position:relative;
  z-index:1;
  min-height:100%;
  min-height:100svh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:
    calc(2rem + env(safe-area-inset-top,0px))
    1.5rem
    calc(2rem + env(safe-area-inset-bottom,0px));
}

.plate{
  width:min(46rem, 100%);
  text-align:center;
}

.logo{
  width:min(33rem, 86%);
  height:auto;
  margin:0 auto;
  display:block;
  filter:drop-shadow(0 .5rem 2.5rem rgba(6,7,10,.85));
}

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

.est{
  margin:1.9rem 0 0;
  font-size:.78rem;
  letter-spacing:var(--track-wide);
  text-transform:uppercase;
  color:var(--ash);
}

/* the rule beneath "Est. 2026", drawn to the width of the word itself */
.est::after{
  content:"";
  display:block;
  width:4.5rem;
  height:1px;
  margin:1.05rem auto 0;
  background:var(--hairline);
}

.headline{
  margin:2.1rem 0 0;
  font-size:clamp(1.15rem, 1.1rem + 1.1vw, 1.85rem);
  font-weight:400;
  letter-spacing:var(--track-wide);
  text-transform:uppercase;
}

.tagline{
  margin:1.35rem 0 0;
  font-size:clamp(.72rem, .66rem + .4vw, .88rem);
  line-height:2.1;
  letter-spacing:var(--track-mid);
  text-transform:uppercase;
  color:var(--ash);
}

/* ---------- signup ---------- */

.signup{
  margin:2.6rem auto 0;
  display:flex;
  gap:.75rem;
  width:min(34rem, 100%);
}

.field{
  flex:1 1 auto;
  min-width:0;
  padding:1rem 1.15rem;
  font:inherit;
  font-size:.78rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--bone);
  background:var(--field-bg);
  border:1px solid var(--hairline);
  border-radius:0;
  -webkit-appearance:none;
  appearance:none;
  transition:border-color .2s ease, background-color .2s ease;
}

.field::placeholder{ color:var(--ash); opacity:.85; }

.field:hover{ border-color:rgba(243,240,233,.6); }

.field:focus{
  outline:none;
  border-color:var(--bone);
  background:rgba(6,7,10,.75);
}

.submit{
  flex:0 0 auto;
  padding:1rem 1.7rem;
  font:inherit;
  font-size:.78rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink);
  background:var(--bone);
  border:1px solid var(--bone);
  border-radius:0;
  cursor:pointer;
  transition:background-color .2s ease, color .2s ease;
}

.submit:hover{ background:#fff; }

.submit[disabled]{ opacity:.55; cursor:default; }

/* visible keyboard focus everywhere */
.field:focus-visible,
.submit:focus-visible,
.social a:focus-visible{
  outline:2px solid var(--ember);
  outline-offset:3px;
}

.status{
  margin:1.1rem 0 0;
  min-height:1.2em;
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ash);
}

.status[data-tone="ok"]{ color:var(--ember); }
.status[data-tone="error"]{ color:#e0a79a; }

/* ---------- social ---------- */

.social{
  margin:2.3rem 0 0;
  display:flex;
  gap:2.1rem;
  justify-content:center;
}

.social a{
  color:var(--bone);
  opacity:.72;
  transition:opacity .2s ease, transform .2s ease;
  display:block;
}

.social a:hover{ opacity:1; transform:translateY(-2px); }

.social svg{
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
  display:block;
}

/* ---------- utilities ---------- */

.visually-hidden{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* ---------- small screens ---------- */

@media (max-width: 40rem){
  .backdrop img{ object-position:72% 50%; }
  .backdrop::after{
    background:
      radial-gradient(85% 45% at 50% 32%, rgba(6,7,10,.74) 0%, rgba(6,7,10,.34) 60%, transparent 85%),
      linear-gradient(to bottom, rgba(6,7,10,.50) 0%, transparent 30%, transparent 58%, rgba(6,7,10,.68) 100%);
  }
  .logo{ width:min(21rem, 92%); }
  .est{ margin-top:1.5rem; }
  .headline{ margin-top:1.7rem; }
  .signup{
    flex-direction:column;
    gap:.6rem;
  }
  .submit{ width:100%; }
  .social{ gap:1.8rem; }
}

@media (max-height: 36rem) and (orientation: landscape){
  .logo{ width:min(18rem, 50%); }
  .est, .headline{ margin-top:1.1rem; }
  .signup{ margin-top:1.5rem; }
  .social{ margin-top:1.4rem; }
}

/* ---------- one quiet arrival ---------- */

@media (prefers-reduced-motion: no-preference){
  .plate > *{
    opacity:0;
    animation:rise .9s cubic-bezier(.2,.7,.3,1) forwards;
  }
  .logo       { animation-delay:.05s; }
  .est        { animation-delay:.35s; }
  .headline   { animation-delay:.50s; }
  .tagline    { animation-delay:.62s; }
  .signup     { animation-delay:.74s; }
  .status     { animation-delay:.74s; }
  .social     { animation-delay:.86s; }

  @keyframes rise{
    from{ opacity:0; transform:translateY(12px); }
    to  { opacity:1; transform:none; }
  }
}