/* ── Purple Labs ─────────────────────────────────────────── */

:root{
  --bg:        #0b0614;
  --bg-panel:  #150c26;
  --ink:       #ede9fe;
  --dim:       #9a86c9;
  --line:      #4c2a85;
  --line-lit:  #7c3aed;
  --accent:    #a78bfa;
  --px: 2px;
}

*{ box-sizing:border-box; margin:0; padding:0 }

html{ background:var(--bg) }

body{
  min-height:100vh;
  background:var(--bg);
  color:var(--ink);
  font-family:"Silkscreen","Courier New",monospace;
  font-size:17px;
  line-height:1.8;
  letter-spacing:.02em;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px 20px;
  -webkit-font-smoothing:none;
  image-rendering:pixelated;
  overflow-x:hidden;
}

/* ── background layers ─────────────────────────────────── */

#stars{
  position:fixed; inset:0;
  width:100%; height:100%;
  image-rendering:pixelated;
  z-index:0;
  opacity:.9;
}

.scanlines{
  position:fixed; inset:0;
  z-index:1;
  pointer-events:none;
  background:repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,.28) 0 1px,
    transparent 1px 3px
  );
  mix-blend-mode:multiply;
}

/* radial vignette so the centre glows */
body::after{
  content:"";
  position:fixed; inset:0;
  z-index:1;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% 38%,
    rgba(124,58,237,.16) 0%,
    rgba(11,6,20,0) 55%,
    rgba(11,6,20,.75) 100%);
}

/* ── layout ────────────────────────────────────────────── */

main{
  position:relative;
  z-index:2;
  width:100%;
  max-width:520px;
  text-align:center;
}

#flask{
  width:240px; height:240px;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  display:block;
  margin:0 auto 18px;
  filter:drop-shadow(0 0 18px rgba(124,58,237,.45));
}

h1{
  font-family:"Press Start 2P",monospace;
  font-size:clamp(28px,6vw,48px);
  line-height:1.5;
  letter-spacing:.06em;
  color:#fff;
  text-shadow:
     var(--px) var(--px) 0 var(--line-lit),
     0 0 22px rgba(167,139,250,.55);
}

.tag{
  margin-top:18px;
  color:var(--dim);
  font-size:clamp(15px,2.2vw,19px);
  line-height:2;
  letter-spacing:.1em;
}

.rule{
  height:var(--px);
  margin:28px auto 26px;
  max-width:200px;
  background:repeating-linear-gradient(
    to right,
    var(--line) 0 6px,
    transparent 6px 12px
  );
}

/* ── form ──────────────────────────────────────────────── */

form{ text-align:left }

label{
  display:block;
  font-size:15px;
  letter-spacing:.16em;
  color:var(--accent);
  margin:0 0 8px;
}

.field{ margin-bottom:18px }

input,textarea{
  display:block;
  width:100%;
  font:inherit;
  font-size:16px;
  color:var(--ink);
  background:var(--bg-panel);
  border:0;
  outline:0;
  padding:11px 12px;
  /* pixel border: four offset shadows, corners left open */
  box-shadow:
     0 calc(-1 * var(--px)) 0 0 var(--line),
     0 var(--px) 0 0 var(--line),
     calc(-1 * var(--px)) 0 0 0 var(--line),
     var(--px) 0 0 0 var(--line);
  transition:box-shadow .08s steps(2), background .08s steps(2);
}

textarea{ resize:vertical; min-height:84px; line-height:1.7 }

input:focus,textarea:focus{
  background:#1c1033;
  box-shadow:
     0 calc(-1 * var(--px)) 0 0 var(--line-lit),
     0 var(--px) 0 0 var(--line-lit),
     calc(-1 * var(--px)) 0 0 0 var(--line-lit),
     var(--px) 0 0 0 var(--line-lit),
     0 0 16px rgba(124,58,237,.4);
}

input::placeholder,textarea::placeholder{ color:#5c4a80 }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0 }

button{
  display:block;
  width:auto;
  min-width:230px;
  margin:6px auto 0;
  font:inherit;
  font-family:"Press Start 2P",monospace;
  font-size:15px;
  letter-spacing:.08em;
  color:#fff;
  background:var(--line-lit);
  border:0;
  padding:14px 34px;
  cursor:pointer;
  box-shadow:
     0 calc(-1 * var(--px)) 0 0 var(--accent),
     0 var(--px) 0 0 var(--accent),
     calc(-1 * var(--px)) 0 0 0 var(--accent),
     var(--px) 0 0 0 var(--accent),
     0 6px 0 0 #3b1a72;
  transition:transform .06s steps(1), box-shadow .06s steps(1);
}

button:hover{ background:#8b4bf0 }

button:active{
  transform:translateY(4px);
  box-shadow:
     0 calc(-1 * var(--px)) 0 0 var(--accent),
     0 var(--px) 0 0 var(--accent),
     calc(-1 * var(--px)) 0 0 0 var(--accent),
     var(--px) 0 0 0 var(--accent),
     0 2px 0 0 #3b1a72;
}

button:disabled{ opacity:.55; cursor:wait; transform:none }

.status{
  min-height:22px;
  margin-top:12px;
  font-size:15px;
  letter-spacing:.08em;
  text-align:center;
  color:var(--accent);
}
.status.err{ color:#ff7b9c }
.status a{ color:#ff7b9c; text-decoration:underline }
.status a:hover{ color:var(--accent) }

footer{
  margin-top:36px;
  font-size:13px;
  letter-spacing:.14em;
  color:#6f5b99;
}
footer a{ color:#6f5b99; text-decoration:none }
footer a:hover{ color:var(--accent) }

/* LinkedIn tile: 22px = 2x the 11-unit grid, so the pixels stay square.
   Padding gives it a real touch target without enlarging the art. */
.li{
  display:inline-block;
  vertical-align:-7px;          /* sits on the footer's text line */
  margin-left:10px;
  padding:4px 8px;              /* touch target without adding a line */
  line-height:0;
  color:#6f5b99;
}
.li svg{ width:22px; height:22px; display:block; image-rendering:pixelated }
.li:hover{ color:var(--accent) }
.li:focus-visible{ outline:2px solid var(--accent); outline-offset:0 }

/* the wide tracking pushes line 1 just past a phone column — tighten it there */
@media (max-width:560px){
  footer{ letter-spacing:.08em }
}

/* ── success state ─────────────────────────────────────── */

.sent form{ display:none }
.sent .rule{ margin-bottom:0 }

.done{
  font-family:"Press Start 2P",monospace;
  font-size:18px;
  line-height:2.2;
  color:var(--accent);
  padding:28px 0 4px;
  text-shadow:0 0 18px rgba(167,139,250,.5);
}

/* ── privacy note ──────────────────────────────────────── */

.privacy{
  margin:0 0 12px;
  font-size:12px;
  line-height:1.9;
  letter-spacing:.06em;
  color:#6f5b99;
  text-align:center;
}

/* ── field grid: side by side once there is room ────────── */

.fields{
  display:grid;
  grid-template-columns:1fr;
  column-gap:18px;
}
.field.wide{ grid-column:1 / -1 }

@media (min-width:700px){
  .fields{ grid-template-columns:repeat(3,1fr) }
}

/* ── one screen, no scroll, hero on top ────────────────── */
/* compact is the DEFAULT here; it scales up only when the
   viewport is tall enough to afford it. Flask sizes are exact
   multiples of its 40px art grid (160=4x, 200=5x, 240=6x) so
   it never scales fractionally and the pixels stay square. */

@media (min-width:900px) and (min-height:620px){
  body{ padding:18px 32px }
  main{ max-width:780px }
  .rule{ display:none }              /* the field grid reads as its own block */
  #flask{ width:200px; height:200px; margin-bottom:10px }
  h1{ font-size:42px }
  textarea{ min-height:76px }
  .field{ margin-bottom:16px }
  .privacy{ margin-bottom:12px }
  form{ margin-top:22px }
  footer{ margin-top:6px }
}

/* laptop heights: trim the flask, keep the two-line wordmark */
@media (min-width:900px) and (min-height:620px) and (max-height:899px){
  body{ padding:18px 32px }
  #flask{ width:160px; height:160px; margin-bottom:8px }
  h1{ font-size:40px }
  .tag{ margin-top:14px }
  form{ margin-top:20px }
  footer{ margin-top:10px }
}

/* short laptops: wordmark collapses to one line, flask to 3x */
@media (min-width:900px) and (min-height:620px) and (max-height:759px){
  body{ padding:14px 32px }
  #flask{ width:120px; height:120px; margin-bottom:6px }
  h1{ font-size:34px }
  h1 br{ display:none }        /* the space before it keeps the words apart */
  .tag{ margin-top:12px }
  textarea{ min-height:66px }
  .field{ margin-bottom:12px }
  .privacy{ margin-bottom:8px }
  form{ margin-top:16px }
  footer{ margin-top:12px }
}

/* tall screens: room to breathe */
@media (min-width:900px) and (min-height:1000px){
  body{ padding:32px }
  #flask{ width:240px; height:240px; margin-bottom:16px }
  h1{ font-size:48px }
  textarea{ min-height:88px }
  .field{ margin-bottom:20px }
  .privacy{ margin-bottom:16px }
  footer{ margin-top:30px }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important }
}