/* ============================================================
   She•Codes Preview Studio
   Palette + type matched to shecodeswebsites.com
   ============================================================ */

:root{
  /* colors — pulled from shecodeswebsites.com */
  --bg:            #FAF3F4;   /* blush off-white */
  --ink:           #0C0C0C;   /* near-black */
  --ink-body:      #2A2226;   /* warm near-black for paragraphs */
  --ink-muted:     #6B5E62;   /* warm gray */
  --pink:          #FF2E88;   /* signature accent */
  --pink-ink:      #0C0C0C;   /* text ON pink */
  --line:          rgba(12,12,12,.12);
  --line-strong:   rgba(12,12,12,.28);
  --danger:        #C4123A;

  /* fonts */
  --font-display:  'Anton', 'Arial Narrow', sans-serif;
  --font-italic:   'Instrument Serif', 'Times New Roman', serif;
  --font-body:     'Geist', Inter, system-ui, sans-serif;
  --font-mono:     'Geist Mono', 'JetBrains Mono', monospace;

  --ease:cubic-bezier(.16,1,.3,1);
}

/* -------- reset -------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{
  min-height:100dvh;
  font-family:var(--font-body);
  font-size:clamp(15px,.9rem + .2vw,17px);
  line-height:1.55;
  color:var(--ink-body);
  background:var(--bg);
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
button{cursor:pointer;font:inherit;color:inherit;border:0;background:none}
input{font:inherit;color:inherit}
a{color:var(--ink);border-bottom:2px solid var(--pink);transition:color .2s var(--ease), background .2s var(--ease)}
a:hover{background:var(--pink);color:#fff}
:focus-visible{outline:2px solid var(--pink);outline-offset:3px;border-radius:2px}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.dot{color:var(--pink)}

/* -------- stage -------- */
.stage{
  position:relative;
  min-height:100dvh;
  display:grid;
  grid-template-rows: auto 1fr auto;
  padding:clamp(20px,3vw,40px) clamp(20px,4vw,64px);
  background:var(--bg);
}

/* -------- top wordmark -------- */
.mark{
  display:inline-flex;align-items:baseline;gap:14px;
  color:var(--ink);
}
.mark-word{
  font-family:var(--font-display);
  font-size:clamp(20px,1rem + 1vw,28px);
  line-height:1;
  letter-spacing:.005em;
}
.mark-sub{
  font-family:var(--font-mono);
  font-size:10px;font-weight:500;
  letter-spacing:.22em;
  color:var(--pink);
  transform:translateY(-2px);
}

/* -------- intro / typewriter -------- */
.intro{
  display:grid;place-items:center;
  padding:clamp(40px,8vh,120px) 0;
  min-height:60dvh;
  text-align:center;
}
.intro-inner{ max-width:1100px; width:100% }

.type-line{
  font-family:var(--font-display);
  font-size:clamp(56px,4rem + 6vw,180px);
  line-height:.95;
  letter-spacing:-.02em;
  color:var(--ink);
  display:inline-flex;
  align-items:baseline;
  justify-content:center;
  gap:.22em;
  flex-wrap:nowrap;
  white-space:nowrap;
}
.type-prefix{
  color:var(--ink);
}
/* the animated word — italic serif, pink, lowercase, like "designs." on the site */
.type-verb{
  font-family:var(--font-italic);
  font-style:italic;
  font-weight:400;
  text-transform:lowercase;
  color:var(--pink);
  letter-spacing:-.005em;
  /* keep vertical rhythm consistent as it grows */
  min-width:2ch;
  text-align:left;
  /* Instrument Serif renders taller than Anton — nudge to align caps line */
  transform:translateY(.02em);
}
.caret{
  display:inline-block;
  color:var(--pink);
  font-family:var(--font-display);
  font-weight:400;
  animation:blink 1s steps(2,end) infinite;
  margin-left:.02em;
}
@keyframes blink{ 50%{opacity:0} }

.tagline{
  margin-top:clamp(22px,4vh,44px);
  font-family:var(--font-body);
  font-size:clamp(15px,.9rem + .3vw,19px);
  color:var(--ink-muted);
  opacity:0;
  transform:translateY(8px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.tagline.show{ opacity:1; transform:none }

/* -------- gate -------- */
.gate{
  display:grid;place-items:center;
  padding:clamp(40px,6vh,80px) 0 clamp(60px,8vh,100px);
  opacity:0;
  transform:translateY(14px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.gate.show{ opacity:1; transform:none }
.gate-inner{ width:min(600px, 100%) }

.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;font-weight:500;
  letter-spacing:.28em;
  color:var(--pink);
  margin-bottom:14px;
}
.gate-title{
  font-family:var(--font-display);
  font-size:clamp(36px,1.6rem + 3vw,64px);
  line-height:1;
  letter-spacing:-.01em;
  color:var(--ink);
  margin-bottom:12px;
  text-transform:uppercase;
}
.gate-sub{
  color:var(--ink-muted);
  max-width:52ch;
  margin-bottom:26px;
  font-size:16px;
}

.gate-form{ display:block }
.field{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:0;
  background:#fff;
  border:2px solid var(--ink);
  border-radius:0;   /* editorial/brutalist — square corners like site CTAs */
  padding:0;
  transition:box-shadow .25s var(--ease);
}
.field:focus-within{
  box-shadow:6px 6px 0 0 var(--pink);
}
.field.shake{ animation:shake .45s var(--ease) }
@keyframes shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-8px)}
  40%{transform:translateX(7px)}
  60%{transform:translateX(-5px)}
  80%{transform:translateX(3px)}
}
.field input{
  width:100%;
  padding:18px 20px;
  background:transparent;
  border:0;outline:0;
  font-family:var(--font-body);
  font-size:16px;
  color:var(--ink);
}
.field input::placeholder{ color:var(--ink-muted); opacity:.7 }

#submitBtn{
  display:inline-flex;align-items:center;gap:10px;
  padding:18px 24px;
  background:var(--pink);
  color:#fff;
  font-family:var(--font-mono);
  font-weight:500;
  font-size:13px;
  letter-spacing:.14em;
  border-radius:0;
  transition:background .25s var(--ease), color .25s var(--ease), transform .2s var(--ease);
}
#submitBtn:hover{ background:var(--ink); color:var(--bg) }
#submitBtn:active{ transform:translate(1px,1px) }
#submitBtn .btn-arrow{ transition:transform .25s var(--ease) }
#submitBtn:hover .btn-arrow{ transform:translateX(3px) }
#submitBtn[disabled]{ opacity:.7; cursor:progress }

.msg{
  min-height:22px;
  margin-top:14px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-muted);
}
.msg.error{ color:var(--danger) }
.msg.ok{ color:var(--pink) }

.footnote{
  margin-top:32px;
  font-size:13px;
  color:var(--ink-muted);
  border-top:1px solid var(--line);
  padding-top:18px;
}

/* -------- foot -------- */
.foot{
  display:flex;justify-content:space-between;align-items:center;
  gap:16px;
  padding-top:24px;
  border-top:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:11px;font-weight:500;
  letter-spacing:.2em;
  color:var(--ink-muted);
}
.foot-l .dot,.foot-r{ color:var(--pink) }

/* -------- responsive -------- */
@media (max-width:640px){
  .type-line{ white-space:normal; flex-wrap:wrap; justify-content:center }
  .field{ grid-template-columns:1fr }
  #submitBtn{ justify-content:center }
  .foot{ flex-direction:column; align-items:flex-start; gap:8px }
}

/* -------- reduced motion -------- */
@media (prefers-reduced-motion:reduce){
  .caret{ animation:none }
  .tagline,.gate{ transition:none }
}