:root{
  --paper:#FBFAF8; --card:#FFFFFF; --ink:#17161A; --muted:#807C77;
  --line:#E5E2DC; --line-soft:#EFECE6; --tint:#F2EFE9;
  --accent:#B5653A; --good:#3D6B4A; --bad:#8C3B2E;
  --sans: ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink); font-family:var(--sans);
  font-size:15px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none}
a.under{border-bottom:1px solid var(--line); padding-bottom:1px}
a.under:hover{border-color:var(--ink)}
.shell{max-width:1160px; margin:0 auto; padding:0 28px}
.narrow{max-width:720px}

/* ---- top bar ---- */
header.bar{
  display:flex; align-items:center; gap:18px; height:58px;
  border-bottom:1px solid var(--line-soft); margin-bottom:34px;
}
.brand{font-variant:small-caps; letter-spacing:.14em; font-size:13px; font-weight:600}
.brand span{color:var(--muted); font-weight:400}
.bar .spacer{flex:1}
.bar .meta{font-size:13px; color:var(--muted)}
.bar .meta b{color:var(--ink); font-weight:500}

/* ---- home ---- */
.hero{padding:56px 0 26px}
.hero h1{
  font-family:var(--serif); font-weight:400; font-size:clamp(32px,4.6vw,54px);
  line-height:1.08; letter-spacing:-.015em; margin:0 0 20px; max-width:19ch;
}
.hero p.lede{font-size:17px; color:#4A4744; max-width:56ch; margin:0 0 34px}
form.start{display:grid; gap:12px; max-width:540px}
.field label{display:block; font-size:11.5px; letter-spacing:.07em; text-transform:uppercase;
  color:#5F5B56; margin-bottom:6px; font-weight:600}
input[type=text], textarea{
  width:100%; font:inherit; color:var(--ink); background:#fff;
  border:1px solid #D7D3CA; border-radius:5px; padding:11px 13px;
}
input[type=text]::placeholder, textarea::placeholder{color:#A9A49C}
input[type=text]:focus, textarea:focus{
  outline:none; border-color:var(--ink); box-shadow:0 0 0 3px rgba(23,22,26,.07)}
textarea{resize:vertical; min-height:74px}
button{
  font:inherit; cursor:pointer; border-radius:5px; padding:11px 20px;
  border:1px solid var(--ink); background:var(--ink); color:#fff;
}
button:hover{background:#000}
button[disabled]{opacity:.4; cursor:not-allowed}
button.ghost{background:transparent; color:var(--ink); border-color:var(--line)}
button.ghost:hover{background:var(--tint); border-color:var(--ink)}
button.small{padding:7px 13px; font-size:13px}
.hint{font-size:13px; color:var(--muted)}

/* The register chooser, on the order form. Radio buttons rather than a
   <select>: the blurb is the point ("Badge" alone means nothing to a shop
   owner) and a dropdown cannot show a second line. The landing page dropped
   its twelve-word row because it looked like a filter and was not one; here
   the choice is real, so the control may look like a control. */
fieldset.styles{border:0; padding:0; margin:2px 0 0; min-width:0}
fieldset.styles legend{padding:0; font-size:11.5px; letter-spacing:.07em;
  text-transform:uppercase; color:#5F5B56; margin-bottom:6px; font-weight:600}
.style-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(186px,1fr)); gap:8px}
.style-opt{display:flex; gap:9px; align-items:flex-start; cursor:pointer;
  border:1px solid #D7D3CA; border-radius:5px; padding:9px 11px; background:#fff}
.style-opt:hover{border-color:#B9B4AA}
.style-opt input[type=radio]{margin:3px 0 0; accent-color:var(--ink); flex:0 0 auto}
.style-opt{font-size:inherit; letter-spacing:normal; text-transform:none;
  color:var(--ink); font-weight:400; margin-bottom:0}
.style-opt b{display:block; font-size:13.5px; font-weight:600; line-height:1.2;
  text-transform:none; letter-spacing:normal}
.style-opt em{display:block; font-style:normal; font-size:12.5px; color:#6B665C;
  line-height:1.35; margin-top:1px; text-transform:none; letter-spacing:normal}
.style-opt:has(input:checked){border-color:var(--ink); box-shadow:0 0 0 1px var(--ink) inset}
.hint-tight{margin:6px 0 0; font-size:12.5px}
.briefline{font-size:12.5px; color:var(--muted); margin:-6px 0 20px;
  padding-bottom:14px; border-bottom:1px solid var(--line-soft)}
/* Nine tiles at one per row is 700px of scroll before the Start button on the
   device most people will use. Two columns keeps the blurb (which is the whole
   reason the tiles are not a <select>) and halves the height. */
@media (max-width:560px){
  .style-grid{grid-template-columns:repeat(2,1fr); gap:7px}
  .style-opt{padding:8px 9px; gap:7px}
  .style-opt b{font-size:12.5px}
  .style-opt em{font-size:11.5px}
}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin:64px 0 20px;
  border-top:1px solid var(--line-soft); padding-top:26px}
.steps h3{font-size:13px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted);
  margin:0 0 6px; font-weight:600}
.steps p{margin:0; font-size:14px; color:#4A4744}
.recent{margin:50px 0 80px}
.recent h2{font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  font-weight:600; margin:0 0 10px}
.recent a{display:flex; gap:14px; align-items:center; padding:9px 0;
  border-bottom:1px solid var(--line-soft); font-size:14px}
.recent a:hover{background:var(--tint)}
.recent a span.when{color:var(--muted); font-size:13px; margin-left:auto}

/* ---- workspace ---- */
.work{display:grid; grid-template-columns:minmax(0,1.02fr) minmax(360px,.98fr);
  gap:44px; align-items:start; padding-bottom:80px}
@media (max-width:940px){ .work{grid-template-columns:1fr; gap:26px} }

.stage{position:sticky; top:26px}
@media (max-width:940px){ .stage{position:static} }
/* The plate hugs its artwork. It used to carry `min-height:320px` while the
   lockup is 3.3:1, so on a 1280 screen the mark was 139px tall inside a 320px
   box - 57% of the card was padding, and the logo read as small and
   apologetic in the one place the client is looking. Measured, not guessed:
   see the note in TODO. The floor only comes back while a drawing is in
   flight, so the page does not jump under the cursor mid-work. */
.plate{background:var(--card); border:1px solid var(--line); border-radius:7px;
  padding:34px 30px; display:flex; align-items:center; justify-content:center}
.plate img{width:100%; height:auto; display:block}
.plate.working{position:relative; overflow:hidden; min-height:320px}
.plate .ghost{opacity:.35; filter:saturate(0)}
.plate .veil{position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; background:linear-gradient(0deg,rgba(255,255,255,.86),rgba(255,255,255,.55))}
.plate .veil .box{text-align:center}
.spinner{width:22px; height:22px; margin:0 auto 12px; border-radius:50%;
  border:2px solid var(--line); border-top-color:var(--ink); animation:spin .9s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.small-check{margin-top:13px; display:flex; align-items:center; gap:13px;
  padding:11px 14px; border:1px solid var(--line-soft); border-radius:6px; background:#fff}
.small-check span{font-size:12px; color:var(--muted); letter-spacing:.03em}
.small-check img{height:32px; width:auto; image-rendering:pixelated}
.specs{margin-top:13px; display:flex; gap:20px; align-items:center; flex-wrap:wrap;
  font-size:12.5px; color:var(--muted)}
.swatch{display:inline-block; width:12px; height:12px; border-radius:50%;
  border:1px solid rgba(0,0,0,.12); vertical-align:-2px; margin-right:5px}
.actions{margin-top:20px; display:flex; gap:10px; flex-wrap:wrap}
.aside-note{margin-top:14px; font-size:12.5px; color:var(--muted)}

/* ---- thread ---- */
.col{display:flex; flex-direction:column; min-height:calc(100vh - 150px)}
.thread{flex:1; padding-bottom:8px}
.turn{margin:0 0 26px}
.turn.them{max-width:50ch}
.turn.them p{margin:0 0 10px}
.turn.me{display:flex; justify-content:flex-end}
.turn.me .bubble{background:var(--tint); border-radius:14px 14px 4px 14px;
  padding:11px 15px; max-width:42ch}
.turn.designer-image{margin:0 0 30px}
.turn.designer-image img{width:100%; border:1px solid var(--line); border-radius:7px;
  background:#fff}
.who{font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted);
  margin-bottom:7px}
.err{color:var(--bad); border-left:2px solid var(--bad); padding-left:12px; font-size:14px}

/* ---- directions ---- */
.directions{border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  margin:6px 0 26px; padding:14px 0}
.dir{display:grid; grid-template-columns:104px 1fr auto; gap:16px; align-items:center;
  padding:12px 10px; border-radius:6px; border:1px solid transparent; cursor:pointer;
  background:transparent; width:100%; text-align:left; color:inherit}
.dir + .dir{margin-top:2px}
.dir:hover{border-color:var(--line); background:#fff}
.dir img{width:104px; height:auto; display:block}
.dir .lbl{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.dir .txt{font-size:13.5px; color:#3B3835; line-height:1.4}
.dir .pick{font-size:12px; color:var(--muted); border:1px solid var(--line);
  border-radius:20px; padding:5px 11px; white-space:nowrap}
.dir:hover .pick{border-color:var(--ink); color:var(--ink)}
.dir.chosen{border-color:var(--ink); background:#fff}

/* ---- composer ---- */
.composer{position:sticky; bottom:0; padding:14px 0 22px; background:linear-gradient(
  0deg, var(--paper) 62%, rgba(251,250,248,0)); }
.composer .row{display:flex; gap:10px; align-items:flex-end}
.composer textarea{min-height:56px}
.status{display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--muted);
  min-height:19px; margin-bottom:9px}
.status .dot{width:6px; height:6px; border-radius:50%; background:var(--line); flex:none}
.status.live .dot{background:var(--accent); animation:pulse 1.1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}

/* ---- pack ---- */
.packgrid{display:grid; grid-template-columns:1fr 320px; gap:44px}
@media (max-width:820px){ .packgrid{grid-template-columns:1fr} }
.files{border-top:1px solid var(--line)}
.files div{display:flex; gap:12px; padding:8px 0; border-bottom:1px solid var(--line-soft);
  font-family:var(--mono); font-size:12.5px}
.files div .bytes{margin-left:auto; color:var(--muted)}
.tagline-lock{font-size:13px; color:var(--muted)}
.banner{background:var(--card); border:1px solid var(--line); border-radius:7px; padding:20px 22px}

/* ---- record ---- */
.rec{border-top:1px solid var(--line-soft); padding:22px 0}
.rec h3{margin:0 0 4px; font-size:15px; font-weight:600}
.rec .kv{display:grid; grid-template-columns:150px 1fr; gap:6px 18px; font-size:13.5px;
  margin-top:12px}
.rec .kv dt{color:var(--muted)}
.rec .kv dd{margin:0}
.rec img{max-width:100%; border:1px solid var(--line); border-radius:6px; background:#fff}
.two{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media (max-width:720px){ .two{grid-template-columns:1fr} }

/* The conversation, as a conversation. The record used to give the client and
   the designer the same card, which made a page of turns read as a log; an
   audit is faster when the two voices sit on different sides of the page. */
.rec.say{display:flex; flex-direction:column; gap:6px; border-top:0;
  border-bottom:1px solid var(--line-soft); padding:12px 0}
.rec.say .who{margin:0; font-size:11px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); padding:0 4px}
.rec.say .bubble{max-width:62ch; padding:11px 15px; border:1px solid var(--line);
  border-radius:14px 14px 14px 4px; background:var(--card); font-size:14.5px;
  line-height:1.5}
.rec.say.client{align-items:flex-end}
.rec.say.client .bubble{background:var(--tint); border-color:transparent;
  border-radius:14px 14px 4px 14px}
.rec.brief-card .brief-body{
  border:1px solid var(--line); border-left:3px solid var(--ink);
  background:var(--card); border-radius:8px; padding:14px 16px;
}
.rec.brief-card .brief-body b{display:block; margin-bottom:2px; font-weight:600}
.rec.brief-card .briefnotes{margin:4px 0 0}
.rec.brief-card .tags{margin-top:8px}
.rec .shot{display:inline-block; max-width:100%}
.rec .shot img{display:block; max-width:100%}
.rec .shot.big{width:100%; max-width:440px}
.rec .twocol{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:22px; align-items:start; margin-top:12px}
@media (max-width:720px){ .rec .twocol{grid-template-columns:1fr} }
.rec .filemeta{margin:0; font-family:var(--mono); font-size:12.5px; color:#4A4744}
.rec .tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:9px}
.rec .tag{font-size:11px; color:var(--muted); border:1px solid var(--line);
  border-radius:20px; padding:2px 9px}
.rec .ask{margin:12px 0 0; padding:10px 13px; border-left:2px solid var(--accent);
  background:var(--tint); border-radius:0 6px 6px 0; font-size:13.5px}
.rec .turnline{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size:13px; color:var(--muted)}
.rec .turnline b{color:var(--ink); font-weight:600}
.rec details.tech{margin-top:10px}
.rec details.tech summary{cursor:pointer; font-size:12px; letter-spacing:.05em;
  text-transform:uppercase; color:var(--muted)}
.rec details.tech summary:hover{color:var(--ink)}
.rec details.tech[open] summary{margin-bottom:8px}
.score{font-family:var(--mono); font-size:13px}
.pill{display:inline-block; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  padding:3px 9px; border-radius:20px; border:1px solid var(--line); color:var(--muted)}
.pill.kept{color:var(--good); border-color:#CBD9CF; background:#F3F7F4}
.pill.lost{color:var(--bad); border-color:#E4D2CE; background:#FBF4F3}
pre{font-family:var(--mono); font-size:12px; background:#fff; border:1px solid var(--line);
  border-radius:6px; padding:12px; overflow:auto; max-height:280px}