/* ============================================================
   refine.css — MvE homepage refinement pass, 28 Aug 2026
   Layered over the existing system. Same palette, same faces.
   Changes execution only: hierarchy, rhythm, proof, relief.
   Remove this one <link> to revert everything.
   ============================================================ */

:root{
  /* one added neutral for hairlines that need to read lighter than --line */
  --line-fine: rgba(17,17,15,.09);
  /* vertical rhythm scale, so section padding stops being ad hoc */
  --bay-s: clamp(46px, 5.2vw, 68px);
  --bay-m: clamp(64px, 7.4vw, 104px);
  --bay-l: clamp(84px, 10vw, 148px);
}

/* ------------------------------------------------------------
   1 · RHYTHM — the single biggest lift.
   The page was evenly paced, which reads as a template. Give the
   argument sections air and keep the evidence sections tight.
   ------------------------------------------------------------ */
.sec{ padding: var(--bay-m) 0; }
.tension{ padding-top: var(--bay-l); }
.cities{ padding: var(--bay-m) 0 var(--bay-s); }
.sec.bone#proof{ padding: var(--bay-s) 0; }
#work{ padding-top: var(--bay-m); }
.intro-strip{ padding: var(--bay-s) 0 0; }

/* ------------------------------------------------------------
   2 · TYPE — widen the interval between display and body.
   Cormorant is a high-contrast face; it wants to be set larger
   and tighter than it currently is, and the body wants to be
   smaller beside it. That interval is what reads as "designed".
   ------------------------------------------------------------ */
h1,h2{ letter-spacing:-.028em; }
.tension h2,
.tension .thesis-screen h2{ letter-spacing:-.03em; }
.shell h2, .mich h2{ font-size:clamp(2.1rem,4.3vw,3.5rem); letter-spacing:-.026em; }

/* the eyebrow labels carry the structure — make them deliberate */
.code{ font-size:.615rem; letter-spacing:.3em; }
.head-code{ margin-bottom: clamp(26px,3.4vw,44px); align-items:center; }
.head-code .line{ height:1px; opacity:.7; }

/* body text: slightly smaller, more leading, shorter measure */
p.body{ font-size:clamp(.94rem,1.02vw,1.005rem); line-height:1.82; max-width:58ch; }
.lead{ letter-spacing:-.012em; }

/* intro strip should read as a standfirst, not as body copy */
.intro-strip .body{
  font-family:var(--dsp); font-weight:300;
  font-size:clamp(1.18rem,1.85vw,1.6rem); line-height:1.48;
  color:var(--ink); max-width:34ch;
}

/* ------------------------------------------------------------
   3 · HERO — hold the sub-line to one idea per line and give the
   coordinates the quiet authority they were reaching for.
   ------------------------------------------------------------ */
.hero .sub{ max-width:30ch; font-size:clamp(1.22rem,1.95vw,1.62rem); line-height:1.42; }
.coords{ gap:clamp(18px,2.6vw,38px); }
.coords span{ font-size:.575rem; letter-spacing:.2em; }
.coords b{ letter-spacing:.06em; }

/* ------------------------------------------------------------
   4 · PROOF — the section she said wasn't landing.
   Numerals get scale and a tabular set; labels recede; the
   testimonial gets a rule and real size instead of sitting as
   a fourth column of equal weight.
   ------------------------------------------------------------ */
.proof{ grid-template-columns:repeat(3,minmax(0,1fr)) 1.45fr; align-items:start; }
.proof .st{ border-top-width:1px; border-top-color:var(--ink); padding-top:18px; }
.proof .st .n{
  font-weight:200; font-size:clamp(3.4rem,6.4vw,5.6rem); line-height:.86;
  letter-spacing:-.045em; font-variant-numeric:tabular-nums lining-nums;
}
.proof .st .lb{ margin:16px 0 0; font-size:.615rem; letter-spacing:.19em; line-height:1.75; max-width:20ch; color:var(--muted); }
.proof .st .ar{ display:none; }           /* an arrow that goes nowhere */
.proof .tq{ border-top-color:var(--ink); padding-top:18px; }
.proof .tq q{ font-size:clamp(1.12rem,1.62vw,1.44rem); line-height:1.44; letter-spacing:-.012em; }
.proof .tq .by{ margin-top:18px; font-size:.575rem; letter-spacing:.19em; }
@media(max-width:900px){
  .proof{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .proof .tq{ grid-column:1 / -1; margin-top:8px; }
}
@media(max-width:560px){
  .proof{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 20px; }
}

/* recognition strip — new. Real, checkable proof the page never carried. */
.recog{
  margin-top:clamp(34px,4.2vw,54px);
  padding-top:clamp(20px,2.4vw,30px);
  border-top:1px solid var(--ink);
}
.recog .code{ display:block; margin-bottom:clamp(18px,2vw,26px); }
.recog ul{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,2.6vw,40px);
}
.recog li{ display:flex; flex-direction:column; gap:7px; }
.recog li b{
  font-family:var(--dsp); font-weight:400; font-size:clamp(1.02rem,1.35vw,1.22rem);
  line-height:1.22; letter-spacing:-.008em; color:var(--ink);
}
.recog li em{ font-style:normal; font-size:.815rem; line-height:1.62; color:var(--body); }
.recog .link{ margin-top:clamp(22px,2.6vw,32px); }
@media(max-width:900px){ .recog ul{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .recog ul{ grid-template-columns:1fr; gap:20px; } }

/* ------------------------------------------------------------
   5 · SHELL THEORY — state the relationship to the method so the
   two ideas stop competing for the same slot.
   ------------------------------------------------------------ */
.pair{
  font-family:var(--dsp); font-weight:300; font-style:italic;
  font-size:clamp(1.08rem,1.5vw,1.32rem); line-height:1.45;
  color:#C98B79; max-width:34ch;
}

/* ------------------------------------------------------------
   6 · FIELD NOTES — the equal three-card grid was the most
   template-like block on the page. Lead card takes the weight.
   ------------------------------------------------------------ */
.fg{ grid-template-columns:1.35fr 1fr 1fr; gap:clamp(12px,1.4vw,20px); align-items:stretch; }
.cov{ aspect-ratio:auto; min-height:clamp(300px,34vw,430px); }
.fg .cov:first-child .ctitle{ font-size:clamp(1.5rem,2.9vw,2.5rem); }
@media(max-width:980px){ .fg{ grid-template-columns:1fr 1fr; } .fg .cov:first-child{ grid-column:1 / -1; min-height:clamp(240px,30vw,330px); } }
@media(max-width:860px){ .fg{ grid-template-columns:1fr; } .cov{ min-height:220px; } }

/* ------------------------------------------------------------
   7 · THE EIGHT — new band. The homepage had no path into the
   newsletter or the diagnostic at all.
   ------------------------------------------------------------ */
.sec.eight{ background:var(--bone); padding:var(--bay-s) 0; }
.egrid{
  display:grid; grid-template-columns:1.25fr .75fr;
  gap:clamp(28px,5vw,80px); align-items:end;
}
.sec.eight h3{
  font-family:var(--dsp); font-weight:300;
  font-size:clamp(1.75rem,3.4vw,2.85rem); line-height:1.08;
  letter-spacing:-.026em; margin-top:16px; max-width:20ch;
}
.sec.eight .body{ margin-top:18px; max-width:52ch; }
.sec.eight .code{ display:block; }
.ecta{ display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.ecta .enote{ font-size:.615rem; letter-spacing:.19em; text-transform:uppercase; color:var(--muted); }
@media(max-width:860px){ .egrid{ grid-template-columns:1fr; align-items:start; gap:30px; } }

/* ------------------------------------------------------------
   8 · NAV — six links need tighter tracking to stay on one line.
   ------------------------------------------------------------ */
nav.links{ gap:clamp(14px,1.7vw,28px); }
nav.links a{ font-size:.615rem; letter-spacing:.17em; }
nav.links a.cta{ padding:10px 16px; }
@media(max-width:1180px){ nav.links a:not(.cta){ letter-spacing:.13em; } }

/* the burger appears below 980 in the original build; six links need it sooner */
@media(max-width:1080px){
  nav.links{ display:none; }
  .burger{ display:flex; }
}

/* ------------------------------------------------------------
   9 · DETAIL — small corrections that read as care.
   ------------------------------------------------------------ */
.marq .lbl{ font-size:.615rem; letter-spacing:.26em; }
.tension .symptoms li{ font-size:.9rem; line-height:1.68; }
.tension .symptoms ul{ gap:11px; }
.tension .sig{ font-size:.94rem; line-height:1.82; }
.adv .tier h4{ font-size:clamp(1.3rem,1.9vw,1.6rem); letter-spacing:-.016em; }
.closing h2{ letter-spacing:-.03em; }
.rres em{ line-height:1.66; }
.room em{ text-wrap:pretty; }
h1,h2,h3,.ctitle,.cy,.rname{ text-wrap:balance; }

/* footer: surface the pages the nav can't hold */
footer .fnav{ flex-wrap:wrap; row-gap:10px; }

/* ------------------------------------------------------------
   10 · COMMERCIAL LEGIBILITY
   Two independent reviews landed on the same gap: the site is
   strong on thesis and weak on "what do I get, and what do I do
   next". These are the elements that answer that.
   ------------------------------------------------------------ */

/* one primary button, filled, so the commercial step is unmistakable */
.btn.primary{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn.primary:hover{ background:transparent; color:var(--ink); }
.btn.ghost{ background:transparent; }
.btn.lt.primary{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.btn.lt.primary:hover{ background:transparent; color:var(--paper); border-color:var(--paper); }
.hero .cta-row{ align-items:center; }
.closing .cta-row{ align-items:center; gap:clamp(16px,2.4vw,30px); flex-wrap:wrap; }
.closing-alt{ color:rgba(243,238,229,.72); }
.closing-alt:hover{ color:var(--paper); }

/* the self-diagnosis block — a tool, not a paragraph */
.symptoms.diag{
  background:var(--bone);
  border:1px solid var(--line);
  border-left:2px solid var(--ink);
  border-radius:2px;
  padding:clamp(22px,2.6vw,30px) clamp(20px,2.4vw,28px);
  margin-top:clamp(28px,3.2vw,40px);
}
.symptoms.diag .code{ margin-bottom:16px; }
.symptoms.diag li{ max-width:none; }
.diag-cta{
  margin-top:20px; padding-top:16px; border-top:1px solid var(--line);
  font-family:var(--dsp); font-weight:300;
  font-size:clamp(1.02rem,1.4vw,1.2rem); line-height:1.4; color:var(--ink);
}
.diag-actions{ margin-top:18px; display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; }

/* scope + price on each tier — the thing both reviews asked for */
.tier .spec{
  margin:20px 0 0; padding-top:16px; border-top:1px solid var(--line);
  display:grid; grid-template-columns:auto 1fr; gap:7px 16px; align-items:baseline;
}
.tier .spec dt{
  font-size:.6rem; letter-spacing:.19em; text-transform:uppercase;
  color:var(--muted); white-space:nowrap;
}
.tier .spec dd{
  margin:0; font-size:.88rem; line-height:1.45; color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.tier .spec dt:last-of-type ~ dd:last-of-type,
.tier .spec dd:last-of-type{ font-family:var(--dsp); font-size:1.06rem; }

/* outcomes — abstraction translated into consequences */
.expect{
  margin-top:clamp(34px,4vw,52px); padding-top:clamp(20px,2.4vw,28px);
  border-top:1px solid var(--ink);
}
.expect .code{ display:block; margin-bottom:clamp(16px,2vw,22px); }
.expect ul{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px clamp(24px,4vw,56px);
}
.expect li{
  position:relative; padding-left:20px; max-width:46ch;
  font-size:.95rem; line-height:1.6; color:var(--body);
}
.expect li::before{
  content:''; position:absolute; left:0; top:.66em;
  width:9px; height:1px; background:var(--ink);
}
@media(max-width:760px){ .expect ul{ grid-template-columns:1fr; } }

@media (prefers-reduced-motion:reduce){
  .cov{ transition:none; }
}