/* start.css — /start-project/ only. Inherits every token, the shell, the button
   system and the reveal system from portfolio.css; nothing here redefines a
   colour, a radius or a font. Both themes come free because every value below
   is a token. */

/* ---- Hero ---------------------------------------------------------------- */
.start-hero{padding-top:clamp(110px,16vh,170px);padding-bottom:0;position:relative;overflow:clip}
.start-hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 80% at 82% -20%,var(--accent-glow),transparent 62%)}
.start-hero__inner{max-width:34ch}
.start-hero h1{margin:.6rem 0 0}
.start-hero__lede{margin-top:1.3rem;max-width:52ch}
.start-hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
/* Inline, not flex: as a wrapping flex container the bare text node becomes one
   over-wide item and drops to the second line, stranding the dot on its own. */
.start-hero__note{margin-top:1.4rem;
  font-family:var(--font-mono);font-size:.76rem;letter-spacing:.05em;color:var(--ink-3)}
.start-hero__note .live{display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--accent);margin-right:.55rem;vertical-align:.08em}
@media(min-width:760px){.start-hero__inner{max-width:none}.start-hero__lede{max-width:56ch}}

/* ---- Two-column layout --------------------------------------------------- */
/* One column until there is genuinely room for a rail beside a comfortable
   form measure. 1020px, not 768: at tablet width a side rail would squeeze the
   inputs below the width a real sentence needs. */
.start-grid{display:grid;grid-template-columns:1fr;gap:clamp(2.4rem,5vw,3.6rem)}
@media(min-width:1020px){
  /* No `align-items:start` here on purpose: the aside has to stretch to the row
     height, otherwise it ends where its own content ends and the sticky inner
     unsticks a third of the way down the form. */
  .start-grid{grid-template-columns:minmax(240px,300px) minmax(0,1fr);
    gap:clamp(3rem,6vw,5rem)}
  .start-rail__inner{position:sticky;top:96px}
}

/* ---- "What happens next" rail -------------------------------------------- */
.start-rail__h{font-family:var(--font-display);font-weight:700;letter-spacing:-.015em;
  font-size:1.15rem;margin-bottom:1.4rem}
.snext{display:flex;flex-direction:column;gap:1.3rem;list-style:none;padding:0;margin:0;
  counter-reset:none}
.snext__item{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start}
.snext__n{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;color:var(--accent-text);
  padding-top:.15rem}
.snext__item h3{font-size:.98rem;font-weight:600;line-height:1.3}
.snext__item p{color:var(--ink-2);font-size:.9rem;margin-top:.2rem}

.start-rail__alt{margin-top:2rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.start-rail__altlabel{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:.5rem}
.start-rail__mail{color:var(--ink);border-bottom:1px solid var(--line-2);padding-bottom:1px;
  word-break:break-all}
.start-rail__mail:hover{color:var(--accent-text);border-color:currentColor}
.start-rail__copy{margin-top:.5rem;font-size:.85rem;color:var(--ink-2);
  border-bottom:1px dashed var(--line-2);padding-bottom:1px}
.start-rail__copy:hover{color:var(--accent-text)}

/* ---- Form shell ---------------------------------------------------------- */
.start-formwrap__intro{color:var(--ink-2);margin-top:.9rem;max-width:56ch}
.start-formwrap__intro em{font-style:normal;color:var(--ink);font-weight:500}
.eform{margin-top:clamp(2rem,4vw,2.8rem);display:flex;flex-direction:column;
  gap:clamp(2rem,4vw,2.8rem)}
/* `display:flex` beats the UA's `[hidden]{display:none}`, so the swap to the
   ready panel needs this or the form stays on screen underneath it. */
.eform[hidden]{display:none}

.egroup{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:1.4rem}
.egroup__legend{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-text);padding:0;margin-bottom:.2rem}

.egrid{display:grid;grid-template-columns:1fr;gap:1.4rem}
@media(min-width:620px){.egrid{grid-template-columns:1fr 1fr;gap:1.4rem 1.6rem}}

.efield{display:flex;flex-direction:column;gap:.45rem;border:0;padding:0;margin:0;min-width:0}
.elabel{font-size:.92rem;font-weight:500;color:var(--ink);padding:0}
.eopt{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-3);margin-left:.4rem;vertical-align:.05em}
.ehelp{font-size:.85rem;color:var(--ink-3);max-width:56ch}

.einput{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:var(--bg-1);
  border:1px solid var(--line-2);border-radius:var(--r);padding:.8rem 1rem;
  transition:border-color .2s,background .2s,box-shadow .2s}
.einput::placeholder{color:var(--ink-3);opacity:1}
.einput:hover{border-color:var(--ink-3)}
.einput:focus{outline:none;border-color:var(--accent);background:var(--bg);
  box-shadow:0 0 0 3px var(--accent-glow)}
/* `.einput:focus{outline:none}` outranks the global `:focus-visible` ring, so a
   keyboard user would otherwise be left with only a 20%-alpha glow. Put the
   real ring back for keyboard focus; a pointer click keeps the softer look. */
.einput:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.einput--area{resize:vertical;min-height:9.5rem;line-height:1.6}

/* ---- Pill choices (real radios / checkboxes underneath) ------------------- */
/* The margin leaves room for the invalid-state outline below, which is drawn at
   a 6px offset and would otherwise sit on the legend's descenders. */
.epills{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.4rem}
.epill{position:relative;display:inline-flex;align-items:center;gap:.5rem;
  padding:.6rem 1rem;border-radius:999px;border:1px solid var(--line-2);background:var(--bg-1);
  font-size:.9rem;color:var(--ink-2);cursor:pointer;
  /* 44px minimum touch target without forcing the pill taller than the type */
  min-height:44px;
  transition:color .2s,border-color .2s,background .2s}
.epill:hover{color:var(--ink);border-color:var(--ink-3)}
/* The control stays in the layout (so the focus ring and any native validation
   bubble land on the pill) but is not painted — the pill is the visual. */
.epill input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;
  border-radius:999px;cursor:pointer}
.epill:has(input:checked){background:var(--accent);border-color:var(--accent);color:var(--accent-ink);
  font-weight:500}
.epill:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
/* Fallback for engines without :has() — the ring is drawn on the input itself. */
@supports not selector(:has(*)){
  .epill input{opacity:0;pointer-events:auto}
  .epill input:checked{opacity:.001}
  .epill input:checked ~ span{font-weight:700;color:var(--accent-text);text-decoration:underline}
}

/* ---- Errors -------------------------------------------------------------- */
.eerr{font-size:.85rem;color:var(--accent-text);font-weight:500}
.eerr[hidden]{display:none}
.efield.is-invalid .einput{border-color:var(--accent-text);background:var(--bg)}
.efield.is-invalid .epills{outline:1px dashed var(--accent-text);outline-offset:6px;border-radius:6px}

/* ---- Actions ------------------------------------------------------------- */
.eactions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem}
.estatus{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.04em;color:var(--ink-3)}
.estatus.is-error{color:var(--accent-text)}
.estatus:empty{display:none}
.efoot{font-size:.85rem;color:var(--ink-3);max-width:52ch;margin-top:-.6rem}

/* honeypot — off-screen, never announced, never tabbable */
.ehp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- Ready-to-send panel ------------------------------------------------- */
.eready{margin-top:clamp(2rem,4vw,2.8rem);padding:clamp(1.6rem,3vw,2.2rem);
  border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--bg-1)}
.eready[hidden]{display:none}
.eready:focus{outline:none}
.eready:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.eready__h{font-family:var(--font-display);font-weight:700;letter-spacing:-.015em;
  font-size:clamp(1.25rem,2.4vw,1.6rem);line-height:1.15}
.eready__body{color:var(--ink-2);margin-top:.7rem;max-width:52ch}
.eready__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.4rem}
.eready__alt{font-size:.88rem;color:var(--ink-3);margin-top:.9rem}
.eready__alt a{color:var(--ink-2);border-bottom:1px solid var(--line-2)}
.eready__alt a:hover{color:var(--accent-text)}
.eready__back{font-size:.88rem;color:var(--ink-2);border-bottom:1px dashed var(--line-2);
  padding-bottom:1px}
.eready__back:hover{color:var(--accent-text)}

@media(prefers-reduced-motion:reduce){
  .einput,.epill{transition:none}
}