/* ============================================================
   start.css — the brief, and the document it writes.
   ============================================================ */

.st-hero{padding:clamp(34px,6vw,74px) 0 clamp(28px,3.6vw,52px)}
.st-hero h1{margin:16px 0 26px}
.st{padding-bottom:var(--pad-y);border-top:var(--rule) solid var(--hair)}
.st-in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);
  gap:clamp(26px,4vw,76px);padding-top:clamp(28px,3.6vw,54px);align-items:start}

/* ---------- Questions ---------- */
.st-pot{position:absolute;left:-9999px}
.q{border:0;border-top:var(--rule) solid var(--hair);padding:clamp(22px,2.6vw,36px) 0}
.q:first-of-type{border-top:0;padding-top:0}
.q legend{display:flex;align-items:baseline;gap:14px;font-family:var(--f-disp);
  font-weight:var(--disp-wght);font-size:clamp(1.24rem,2.4vw,2.05rem);letter-spacing:-.03em;
  line-height:1.05;margin-bottom:20px;padding:0}
.q legend .mono{font-size:11px;letter-spacing:.16em}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,26px)}
@media (max-width:700px){.grid2{grid-template-columns:1fr}}

.fld{display:grid;gap:9px}
.fld>span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-dim)}
.fld input,.fld textarea{width:100%;padding:14px 0;background:none;color:var(--fg);
  border:0;border-bottom:var(--rule) solid var(--hair);font-family:var(--f-grotesk);
  font-size:clamp(1rem,1.3vw,1.16rem);transition:border-color .3s var(--ease)}
.fld textarea{resize:vertical;line-height:1.55;padding-top:6px}
.fld input::placeholder,.fld textarea::placeholder{color:color-mix(in srgb,var(--fg-dim) 62%,transparent)}
.fld input:focus,.fld textarea:focus{outline:none;border-color:var(--accent)}
.fld input:user-invalid,.fld textarea:user-invalid{border-color:var(--blood)}

.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{position:relative}
.opt input{position:absolute;inset:0;opacity:0;cursor:pointer}
.opt-l{display:block;padding:11px 16px;border:var(--rule) solid var(--hair);border-radius:var(--radius);
  font-size:.95rem;color:var(--fg-dim);transition:color .28s var(--ease),border-color .28s,background .28s}
.opt:hover .opt-l{color:var(--fg);border-color:color-mix(in srgb,var(--fg) 40%,transparent)}
.opt:has(input:checked) .opt-l{background:var(--accent);border-color:var(--accent);color:var(--fg-inv)}
.opt:has(input:focus-visible) .opt-l{outline:2px solid var(--fg);outline-offset:3px}

.st-send{display:grid;gap:18px;padding-top:clamp(24px,3vw,40px);
  border-top:var(--rule) solid var(--hair)}
.st-send .mono{font-size:11px;letter-spacing:.06em;text-transform:none;max-width:52ch;line-height:1.6}
.st-submit{justify-self:start}
.st-submit[aria-busy="true"]{opacity:.6;pointer-events:none}
.st-err{margin-top:16px;padding:13px 16px;border:var(--rule) solid var(--blood);
  color:var(--fg);font-size:.94rem}

/* ---------- The live brief ---------- */
.st-side{position:sticky;top:96px;display:grid;gap:clamp(18px,2.4vw,30px)}
.brief{border:var(--rule) solid var(--hair);border-top:2px solid var(--accent);
  background:var(--bg-2);padding:clamp(20px,2.4vw,32px)}
.brief-head{display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding-bottom:14px;border-bottom:var(--rule) solid var(--hair);
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
.brief-head .mono:first-child{color:var(--accent)}
.brief-body{margin:20px 0 0;font-family:var(--f-serif);font-size:clamp(1.06rem,1.5vw,1.3rem);
  line-height:1.5;color:var(--fg)}
.brief-body b{font-family:var(--f-grotesk);font-weight:600;font-size:.92em;
  background:color-mix(in srgb,var(--accent) 20%,transparent);padding:0 .18em}
.brief-body em{font-style:italic;color:var(--fg-dim)}
.brief-cfg{margin-top:22px;padding:15px;border:var(--rule) dashed var(--hair)}
.brief-cfg .mono{font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.brief-cfg p{margin:9px 0 12px;font-size:.9rem;line-height:1.55;color:var(--fg-dim)}
.brief-cfg-x{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--fg-dim);border-bottom:var(--rule) solid var(--hair);padding-bottom:2px}
.brief-cfg-x:hover{color:var(--accent);border-color:var(--accent)}
.brief-foot{display:flex;justify-content:space-between;gap:12px;margin-top:24px;padding-top:14px;
  border-top:var(--rule) solid var(--hair);font-size:10px;letter-spacing:.15em;text-transform:uppercase}

.st-direct{display:grid;gap:10px}
.st-direct .mono{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
.st-big{font-family:var(--f-disp);font-weight:var(--disp-wght);letter-spacing:-.03em;
  font-size:clamp(1.16rem,1.9vw,1.6rem);line-height:1.1;
  transition:color .3s var(--ease),padding-left .35s var(--ease)}
.st-big:hover{color:var(--accent);padding-left:8px}

@media (max-width:960px){.st-in{grid-template-columns:1fr}.st-side{position:static;order:-1}}

/* ---------- Sent state ---------- */
.st-done{display:grid;gap:16px;padding:clamp(26px,3vw,44px);
  border:var(--rule) solid var(--accent);background:color-mix(in srgb,var(--accent) 8%,var(--bg-2))}
.st-done h2{font-size:clamp(1.6rem,3.4vw,2.8rem);letter-spacing:-.035em;line-height:1}
.st-done p{color:var(--fg-dim);line-height:1.62;max-width:48ch}

/* ---------- Thanks page ---------- */
.tk{padding:clamp(60px,12vw,170px) 0 var(--pad-y)}
.tk h1{margin:18px 0 30px}
.tk-next{display:flex;flex-wrap:wrap;gap:clamp(18px,3vw,44px);margin-top:clamp(30px,4vw,58px)}
.tk-sig{margin-top:clamp(40px,6vw,90px);padding-top:20px;
  border-top:var(--rule) solid var(--hair);font-size:11px;letter-spacing:.14em;text-transform:uppercase}