/* ============================================================
   CRAWFORD CREATIVE CO. — shared styles
   Black & white, editorial, type-driven. Tokens documented in DESIGN.md.
   ============================================================ */
:root{
  /* Color — monochrome */
  --paper:    #FFFFFF;   /* base */
  --paper-2:  #F6F6F3;   /* alternating section ground (barely warm) */
  --ink:      #161616;   /* headings, strong text, solid buttons */
  --body:     #333333;   /* body copy */
  --muted:    #6E6E6E;   /* secondary */
  --faint:    #9B9B9B;   /* captions, labels */
  --line:     #E5E4E0;   /* hairline */
  --line-2:   #EEEDEA;   /* lighter hairline */

  /* Type */
  --f-display: "Fraunces", Georgia, "Times New Roman", serif;
  --f-text:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --step--1: clamp(0.80rem, 0.78rem + 0.1vw, 0.86rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.2vw, 1.10rem);
  --step-1:  clamp(1.20rem, 1.10rem + 0.5vw, 1.44rem);
  --step-2:  clamp(1.50rem, 1.30rem + 1.0vw, 2.00rem);
  --step-3:  clamp(2.00rem, 1.60rem + 2.0vw, 3.10rem);
  --step-4:  clamp(2.50rem, 1.90rem + 3.2vw, 4.60rem);

  /* Spacing (4px base) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px;

  --measure: 62ch;
  --edge: clamp(20px, 6vw, 88px);
  --maxw: 1140px;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--paper);
  color:var(--body);
  font-family:var(--f-text);
  font-size:var(--step-0);
  line-height:1.65;
  font-feature-settings:"kern" 1;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- Type ---------- */
h1,h2,h3{ font-family:var(--f-display); color:var(--ink); font-weight:500; line-height:1.06; letter-spacing:-0.015em; margin:0; }
h1{ font-size:var(--step-4); font-weight:400; }
h2{ font-size:var(--step-3); }
h3{ font-size:var(--step-1); letter-spacing:-0.01em; }
p{ margin:0; }
a{ color:inherit; }

.eyebrow{
  font-family:var(--f-text); font-size:var(--step--1); font-weight:600;
  letter-spacing:0.2em; text-transform:uppercase; color:var(--faint); margin:0;
}
.lead{ font-size:var(--step-1); line-height:1.5; color:var(--muted); max-width:var(--measure); }
.dim{ color:var(--muted); }

/* ---------- Layout ---------- */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--edge); }
section{ padding-block:var(--sp-9); }
.section-head{ max-width:var(--measure); }
.section-head .eyebrow{ margin-bottom:var(--sp-4); }
.section-head h2 + p{ margin-top:var(--sp-4); }
.rule{ height:1px; background:var(--line); border:0; margin:0; }
.ground-2{ background:var(--paper-2); border-block:1px solid var(--line-2); }

/* ---------- Header / nav ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,0.88);
  backdrop-filter:saturate(120%) blur(8px);
  border-bottom:1px solid var(--line-2);
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; padding-block:var(--sp-4); gap:var(--sp-5); }
.wordmark{ font-family:var(--f-display); font-weight:600; font-size:var(--step-0); letter-spacing:0.01em; text-decoration:none; color:var(--ink); white-space:nowrap; }
.nav{ display:flex; gap:var(--sp-6); align-items:center; }
.nav a{
  font-family:var(--f-text); font-size:var(--step--1); font-weight:500; letter-spacing:0.04em;
  text-transform:uppercase; text-decoration:none; color:var(--muted); padding-block:var(--sp-2);
  border-bottom:1.5px solid transparent; transition:color .18s, border-color .18s;
}
.nav a:hover{ color:var(--ink); }
.nav a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--ink); }
@media (max-width:520px){ .nav{ gap:var(--sp-4); } }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:var(--sp-3);
  font-family:var(--f-text); font-size:var(--step--1); font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase; text-decoration:none;
  padding:var(--sp-4) var(--sp-6); border-radius:2px; cursor:pointer;
  transition:transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary{ background:var(--ink); color:var(--paper); border:1px solid var(--ink); }
.btn-primary:hover{ background:#000; }
.btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--paper); }
.btn:active{ transform:translateY(1px); }

/* ---------- Footer ---------- */
.site-footer{ border-top:1px solid var(--line); padding-block:var(--sp-7); }
.site-footer .wrap{ display:flex; justify-content:space-between; align-items:center; gap:var(--sp-4); flex-wrap:wrap; color:var(--faint); font-size:var(--step--1); }
.site-footer a{ color:var(--muted); text-decoration:none; }
.site-footer a:hover{ color:var(--ink); }
.site-footer .wordmark{ font-size:var(--step--1); }

/* ---------- Scroll reveal ---------- */
.reveal{ opacity:0; transform:translateY(14px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.skip{ position:absolute; left:-999px; }
.skip:focus{ left:var(--edge); top:var(--sp-3); z-index:100; background:var(--ink); color:var(--paper); padding:var(--sp-3) var(--sp-4); border-radius:2px; text-decoration:none; }

/* ============================================================
   HOME
   ============================================================ */
.hero{ padding-block:var(--sp-10) var(--sp-9); }
.hero .eyebrow{ margin-bottom:var(--sp-5); }
.hero h1{ max-width:20ch; }
.hero .sub{ margin-top:var(--sp-6); font-size:var(--step-1); color:var(--muted); max-width:46ch; }
.hero .sub b{ color:var(--ink); font-weight:500; }
.hero .cta-row{ margin-top:var(--sp-8); display:flex; flex-wrap:wrap; gap:var(--sp-4); align-items:center; }

/* Who this is for */
.forwhom .big{ font-family:var(--f-display); font-weight:400; font-size:var(--step-2); line-height:1.3; max-width:30ch; color:var(--ink); }
.forwhom .big i{ font-style:italic; }
.forwhom .flow{ margin-top:var(--sp-6); display:flex; flex-wrap:wrap; gap:var(--sp-3); align-items:center; color:var(--muted); font-size:var(--step-0); }
.forwhom .flow span{ border:1px solid var(--line); padding:var(--sp-2) var(--sp-4); border-radius:2px; color:var(--ink); }
.forwhom .flow .arw{ border:0; padding:0; color:var(--faint); }

/* What I do — three offers */
.offers{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:var(--sp-8); border-top:1px solid var(--ink); }
.offer{ padding:var(--sp-7) var(--sp-5) var(--sp-6); border-right:1px solid var(--line); position:relative; }
.offer:last-child{ border-right:0; }
.offer .no{ font-family:var(--f-display); font-size:var(--step-1); color:var(--faint); font-variant-numeric:tabular-nums; }
.offer h3{ margin:var(--sp-4) 0 var(--sp-3); }
.offer p{ color:var(--muted); font-size:var(--step-0); }
@media (max-width:780px){
  .offers{ grid-template-columns:1fr; border-top:0; }
  .offer{ border-right:0; border-top:1px solid var(--line); padding:var(--sp-6) 0; }
}

/* How we work */
.howwork .statement{ font-family:var(--f-display); font-weight:400; font-size:var(--step-2); line-height:1.32; max-width:28ch; color:var(--ink); }
.howwork .statement b{ font-weight:400; font-style:italic; }
.howwork .support{ margin-top:var(--sp-6); max-width:var(--measure); color:var(--muted); }

/* Proof line */
.proofline{ max-width:var(--measure); }
.proofline p{ font-family:var(--f-display); font-size:var(--step-1); line-height:1.45; color:var(--ink); font-style:italic; }

/* Closing CTA */
.close{ text-align:center; padding-block:var(--sp-10); }
.close h2{ max-width:20ch; margin-inline:auto; }
.close .lead{ margin:var(--sp-5) auto 0; }
.close .cta-row{ margin-top:var(--sp-7); display:flex; gap:var(--sp-4); justify-content:center; flex-wrap:wrap; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:var(--sp-9); margin-top:var(--sp-8); align-items:start; }
@media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; gap:var(--sp-8); } }

form.contact{ display:grid; gap:var(--sp-5); }
.field{ display:grid; gap:var(--sp-2); }
.field label{ font-size:var(--step--1); font-weight:600; letter-spacing:0.04em; color:var(--ink); }
.field .hint{ font-size:var(--step--1); color:var(--faint); font-weight:400; letter-spacing:0; }
.field input,
.field select,
.field textarea{
  font-family:var(--f-text); font-size:var(--step-0); color:var(--ink);
  background:var(--paper); border:1px solid var(--line); border-radius:2px;
  padding:var(--sp-3) var(--sp-4); width:100%;
}
.field input:focus,
.field select:focus,
.field textarea:focus{ border-color:var(--ink); outline:none; }
.field textarea{ min-height:120px; resize:vertical; }
.radio-row{ display:flex; gap:var(--sp-5); }
.radio-row label{ display:flex; align-items:center; gap:var(--sp-2); font-weight:400; letter-spacing:0; color:var(--body); }
.radio-row input{ width:auto; }
form.contact .btn{ justify-self:start; }

.contact-aside .k{ font-size:var(--step--1); letter-spacing:0.18em; text-transform:uppercase; color:var(--faint); margin-bottom:var(--sp-3); }
.contact-aside .email{ font-family:var(--f-display); font-size:var(--step-1); color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); }
.contact-aside .email:hover{ border-color:var(--ink); }
.contact-aside p + .k{ margin-top:var(--sp-7); }
.contact-aside .note{ margin-top:var(--sp-4); color:var(--muted); }
.trustline{ margin-top:var(--sp-8); padding-top:var(--sp-6); border-top:1px solid var(--line); color:var(--muted); font-size:var(--step-0); max-width:40ch; }
.trustline b{ color:var(--ink); font-weight:600; }

/* ============================================================
   BLOG
   ============================================================ */
.blog-intro{ max-width:var(--measure); }
.emptystate{ margin-top:var(--sp-6); padding:var(--sp-5) var(--sp-6); border:1px solid var(--line); border-radius:2px; color:var(--muted); background:var(--paper-2); }
.emptystate a{ color:var(--ink); }
.postlist{ list-style:none; margin:var(--sp-8) 0 0; padding:0; border-top:1px solid var(--ink); }
.postlist li{ padding:var(--sp-6) 0; border-bottom:1px solid var(--line); display:grid; grid-template-columns:auto 1fr auto; gap:var(--sp-5); align-items:baseline; }
.postlist .idx{ font-family:var(--f-display); color:var(--faint); font-variant-numeric:tabular-nums; }
.postlist h3{ font-family:var(--f-display); }
.postlist .blurb{ grid-column:2; color:var(--muted); font-size:var(--step-0); margin-top:var(--sp-2); }
.postlist .status{ font-size:var(--step--1); letter-spacing:0.14em; text-transform:uppercase; color:var(--faint); white-space:nowrap; }
@media (max-width:640px){
  .postlist li{ grid-template-columns:auto 1fr; }
  .postlist .status{ grid-column:2; margin-top:var(--sp-2); }
  .postlist .blurb{ grid-column:1 / -1; }
}
.blog-cta{ margin-top:var(--sp-9); padding-top:var(--sp-7); border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:var(--sp-5); flex-wrap:wrap; }
.blog-cta p{ font-family:var(--f-display); font-size:var(--step-1); color:var(--ink); }