/* ============================================================
   Wordsmith's Emissary — wordsmithsemissary.com
   Design rationale: _PLAN/01_DESIGN_REVIEW_BY_PERSONA.md §6

   THE BUYER: a writer with a finished draft, anxious, about to
   spend $300–3,000, who cannot confidently name what they need.
   Developmental, line, copy, proof — routinely confused, and that
   confusion is exactly why they hesitate to hire anyone.

   So the blocker is UNCERTAINTY, which makes clarity the entire
   aesthetic. The design's job is to make things feel knowable.
   The diagnostic — "what kind of editing do you need?" — is the
   core asset and the most designed thing on the site.

   PALETTE: ink and paper. Near-black on warm off-white with a
   single deep blue accent. Blue is the hue most associated with
   competence and trust, which is precisely what someone about to
   hand over a manuscript and a large sum needs to feel.
   RESTRAINT IS THE STATEMENT — a busy or colourful design would
   undermine a service about precision.

   A muted amber is reserved ONLY for price information, so cost
   is always easy to find and never buried. Hidden pricing is this
   category's biggest trust failure, and being visibly different
   about it is a positioning decision, not a styling one.

   TYPE: serif for display AND body — the one site in the batch
   where that is right, because the reader is a reader by
   definition and it reinforces the manuscript association.

   NO stock photography of people at laptops. The category is
   saturated with it and its absence reads as confidence.

   Contrast (WCAG 2.2 AA):
     --ink      on --paper = 15.4:1
     --ink-soft on --paper =  6.8:1
     --blue     on --paper =  8.1:1
     --amber    on --paper =  5.6:1
     --paper    on --blue  =  8.1:1
   ============================================================ */

:root {
  --paper:    #fbfaf7;
  --paper-2:  #f2f0e9;
  --paper-3:  #e9e6dc;

  --ink:      #1a1a18;
  --ink-soft: #55534d;

  --blue:      #1f4e79;   /* competence, trust */
  --blue-deep: #163a5a;
  --blue-tint: #e6edf4;

  --amber:      #8a6209;  /* prices only */
  --amber-tint: #f5eeda;

  --rule:     #ddd9d0;

  --accent:     var(--blue);
  --accent-ink: #fbfaf7;
  --focus:      #8a6209;

  --serif: 'Spectral', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;

  --measure: 66ch;
}

/* ============ Document — serif throughout ============ */
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.09rem;
  line-height: 1.75;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.008em;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 4.8vw, 3rem); margin-bottom: 1rem; }
h2 { font-size: clamp(1.45rem, 3vw, 1.95rem); margin: 3rem 0 0.9rem; }
h3 { font-size: clamp(1.1rem, 2.1vw, 1.28rem); margin: 2rem 0 0.5rem; }

p { margin-bottom: 1.2rem; }
ul, ol { margin: 0 0 1.4rem; padding-left: 1.3rem; }
li { margin-bottom: 0.55rem; }
strong { font-weight: 600; }

a { color: var(--blue); text-underline-offset: 0.2em; }
a:hover { text-decoration-thickness: 2px; }

hr { border: none; border-top: 1px solid var(--rule); margin: 3rem 0; }

/* ============ Layout ============ */
.wrap         { width: min(100% - 2.5rem, 1060px); margin-inline: auto; }
.wrap--narrow { width: min(100% - 2.5rem, 700px);  margin-inline: auto; }
.section      { padding: 3.75rem 0; }
.section--alt { background: var(--paper-2); }

/* ============ Header ============ */
.site-header {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 100;
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.4rem; padding: 1.05rem 0; flex-wrap: wrap;
}
.site-logo {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.site-nav ul { display: flex; gap: 1.45rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.site-nav a {
  font-size: 0.95rem;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0.65rem 0;
  display: inline-block;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--blue); border-bottom-color: var(--blue); }

/* ============ Hero ============ */
.hero { padding: 4rem 0 2.5rem; }
.hero h1 { max-width: 19ch; }
.hero .lede {
  font-size: clamp(1.1rem, 2.1vw, 1.32rem);
  color: var(--ink-soft);
  max-width: 52ch;
  margin-top: 1.4rem;
}

/* ============ The two-door split ============ */
.doors {
  display: grid;
  gap: 1.35rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  margin-top: 2.5rem;
}
.door {
  border: 1px solid var(--rule);
  background: #fff;
  padding: 1.9rem 1.75rem 2rem;
  display: flex;
  flex-direction: column;
}
.door h2 { margin: 0 0 0.8rem; font-size: 1.4rem; }
.door p { flex-grow: 1; color: var(--ink-soft); }
.door .btn { align-self: flex-start; }

/* ============ THE DIAGNOSTIC — the core asset ============
   This buyer's blocker is not knowing what to ask for. The most
   valuable page on the site is the one that tells them. */
.diagnostic {
  border: 2px solid var(--ink);
  background: #fff;
  padding: 0;
  margin: 2.5rem 0;
}
.diagnostic__step {
  border-bottom: 1px solid var(--rule);
  padding: 1.75rem 1.9rem;
}
.diagnostic__step:last-child { border-bottom: none; }
.diagnostic__q {
  font-size: 0.78rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--blue);
  font-weight: 600;
  display: block;
  margin-bottom: 0.6rem;
}
.diagnostic h3 { margin: 0 0 0.6rem; }
.diagnostic p:last-child { margin-bottom: 0; }
.diagnostic__answer {
  background: var(--blue-tint);
  border-left: 4px solid var(--blue);
  padding: 0.9rem 1.15rem;
  margin-top: 1rem;
}
.diagnostic__answer p { margin-bottom: 0; }

/* ============ Price — amber, always findable ============ */
.price {
  font-weight: 600;
  color: var(--amber);
  font-variant-numeric: tabular-nums;
}
.price-band {
  background: var(--amber-tint);
  border-left: 4px solid var(--amber);
  padding: 1.1rem 1.35rem;
  margin: 1.5rem 0;
  max-width: var(--measure);
}
.price-band p:last-child { margin-bottom: 0; }

/* ============ Editor listing — specialism and rate, never a headshot ============ */
.editors { list-style: none; padding: 0; margin: 2rem 0 0; border-top: 1px solid var(--rule); }
.editors > li {
  border-bottom: 1px solid var(--rule);
  padding: 1.6rem 0;
  display: grid;
  gap: 0.35rem 2.5rem;
}
@media (min-width: 46rem) {
  .editors > li { grid-template-columns: 1fr auto; align-items: start; }
}
.editors h3 { margin: 0 0 0.25rem; }
.editors__what { color: var(--ink-soft); }
.editors__rate { white-space: nowrap; }

/* ============ Buttons ============ */
.btn {
  display: inline-block;
  font-family: var(--serif);
  font-size: 0.98rem;
  font-weight: 600;
  padding: 0.85rem 1.7rem;
  background: var(--blue);
  color: var(--accent-ink);
  border: 1px solid var(--blue);
  border-radius: 3px;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--blue-deep); border-color: var(--blue-deep); color: var(--accent-ink); }
.btn--ghost { background: transparent; color: var(--blue); }
.btn--ghost:hover { background: var(--blue); color: var(--accent-ink); }

/* ============ Callout ============ */
.callout {
  background: var(--paper-2);
  border-left: 4px solid var(--ink);
  padding: 1.3rem 1.55rem;
  margin: 2rem 0;
  max-width: var(--measure);
}
.callout p:last-child { margin-bottom: 0; }

/* ============ Tables ============ */
.table-scroll { margin: 1.9rem 0; }
table { width: 100%; min-width: 34rem; border-collapse: collapse; }
th, td { padding: 0.8rem 0.9rem; border: 1px solid var(--rule); text-align: left; vertical-align: top; }
th { background: var(--paper-2); font-weight: 600; }
td .price { display: inline-block; }

/* ============ Forms ============ */
.field { margin-bottom: 1.25rem; }
.field label { font-weight: 600; font-size: 0.98rem; margin-bottom: 0.4rem; }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 0.8rem 0.9rem;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--ink);
  font-family: var(--serif);
}
.field textarea { min-height: 7rem; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { border-color: var(--blue); }
.field__hint { font-size: 0.93rem; color: var(--ink-soft); margin: 0.35rem 0 0; }

/* ============ Signup ============ */
.signup {
  border: 1px solid var(--rule);
  background: #fff;
  padding: 2.1rem 1.95rem;
  max-width: 40rem;
}
.signup h2 { margin-top: 0; }
.signup__form { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.2rem; align-items: flex-end; }
.signup label { font-weight: 600; font-size: 0.96rem; margin-bottom: 0.4rem; }
.signup input[type="email"] {
  width: 100%;
  padding: 0.8rem 0.9rem;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
}
.signup input[type="email"]:focus-visible { border-color: var(--blue); }
.signup__note { font-size: 0.93rem; color: var(--ink-soft); margin: 0.95rem 0 0; }

/* ============ Footer ============ */
.site-footer {
  border-top: 1px solid var(--rule);
  background: var(--paper-2);
  padding: 2.75rem 0;
  margin-top: 4rem;
  font-size: 0.95rem;
}
.site-footer ul { display: flex; gap: 1.4rem; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 1.1rem; }
.site-footer a { color: var(--ink-soft); text-decoration: none; padding: 0.3rem 0; display: inline-block; }
.site-footer a:hover { color: var(--blue); }
.site-footer p { color: var(--ink-soft); margin: 0; max-width: none; }