/* ==========================================================================
   Donovan Homes FL — Shared Editorial Stylesheet  (v1.0, Oct 2, 2026)
   /assets/editorial.css
   Opt-in: add class "ed" to <body>. Everything is scoped under body.ed so
   historical per-page inline CSS keeps working and is overridden by
   specificity (not !important or load order).

   Reading pattern:
     centered hero > centered spine > left-aligned prose (680) inside the spine
     > wide breakouts (1080) > back to the prose spine > related > centered CTA
   ========================================================================== */
body.ed{
  --ed-shell:1080px;                 /* primary shell / wide blocks */
  --ed-wide:1080px;
  --ed-prose:680px;                  /* editorial reading column */
  --ed-form:560px;                   /* forms */
  --ed-gap:clamp(64px,8vw,104px);    /* one section rhythm */
  --ed-stack:clamp(36px,4.5vw,56px); /* prose -> wide block spacing */
}

/* ---- Hero: centered, one axis -------------------------------------- */
.ed #page-hero{padding:calc(76px + clamp(48px,7vw,96px)) var(--pad) clamp(56px,7vw,88px)}
.ed .hero-grid.no-photo{max-width:800px;text-align:center}
.ed .hero-grid.no-photo .eb-rule{justify-content:center}
.ed .hero-grid.no-photo .eb-rule::after{display:none}
.ed .hero-grid.no-photo .hero-crumb,
.ed .hero-grid.no-photo .hero-byline{justify-content:center}
.ed .hero-grid.no-photo h1{max-width:none;margin-left:auto;margin-right:auto}
.ed .hero-grid.no-photo .hero-stand{margin-left:auto;margin-right:auto}
.ed #page-hero h1{font:500 clamp(34px,4.4vw,54px)/1.14 var(--serif)}

/* ---- Section rhythm ------------------------------------------------ */
.ed .ch{padding:var(--ed-gap) var(--pad)}
.ed .ch-inner{max-width:var(--ed-shell);margin:0 auto}
.ed .persp{padding:var(--ed-gap) var(--pad)}
.ed #next{padding:var(--ed-gap) var(--pad)}
.ed .next-inner{max-width:var(--ed-prose);padding-top:clamp(48px,6vw,72px)}

/* ---- The spine: prose column, centered container, left-aligned text */
.ed .ch-inner>*{width:100%;max-width:var(--ed-prose);margin-left:auto;margin-right:auto;text-align:left}
.ed .ch-head .ch-lead{max-width:none}
.ed .ch-head .s-sub,.ed .ch-lead,.ed .ch-head p{font-size:clamp(16px,1.5vw,17.5px);line-height:1.75}
.ed .aside-note{max-width:var(--ed-prose)}
.ed .guide-notes{max-width:var(--ed-prose)}

/* ---- Wide breakouts ------------------------------------------------ */
.ed .ch-inner>:is(.methods,.ledger-wrap,.ledger,.vs,.mk-stats,.plan,.phases,.plain-list){
  width:100%;max-width:var(--ed-wide);margin-left:auto;margin-right:auto}
.ed .ch-inner>:is(.ch-head,.ch-lead,.s-sub,.ch-more)+:is(.methods,.ledger-wrap,.ledger,.vs,.mk-stats,.plan,.phases,.plain-list,.aside-note){margin-top:var(--ed-stack)}
.ed .ch-inner>:is(.methods,.ledger-wrap,.ledger,.vs,.mk-stats,.plan,.phases,.plain-list)+:is(.aside-note,.ch-more,.ledger-note,.vs-note,.numbers-note,.ch-head){margin-top:var(--ed-stack)}

/* ---- Forms --------------------------------------------------------- */
.ed .ch-inner>form{width:100%;max-width:var(--ed-form);margin-left:auto;margin-right:auto}

/* ---- Hierarchy (one scale) ----------------------------------------- */
.ed .eb{font:600 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase}
.ed .s-title{font:500 clamp(28px,3.6vw,40px)/1.15 var(--serif);text-wrap:balance}
.ed .ch-head h3,.ed .ch-inner>h3{font:500 clamp(20px,2.2vw,24px)/1.3 var(--serif)}   /* component-internal h3/h4 keep their own styles; colour is never set here so dark (.on-ink) bands stay legible */
.ed .ledger th{font:600 10.5px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase}
.ed #next h3{font:500 clamp(28px,3.6vw,42px)/1.15 var(--serif)}

/* ---- FAQ / sources / related (for pages that carry them) ----------- */
.ed .ed-faq,.ed .ed-sources,.ed .ed-related{width:100%;max-width:var(--ed-prose);margin:var(--ed-stack) auto 0;text-align:left}
.ed .ed-sources{font-size:13.5px;line-height:1.7;color:var(--muted);border-top:1px solid var(--line);padding-top:24px}
.ed .ed-related{border-top:1px solid var(--line);padding-top:24px}

/* ---- Prose links (v1.1) -------------------------------------------------
   Scoped to inline links inside editorial copy (.ch-inner > p / li / td).
   Not applied to: nav, hero/breadcrumbs, buttons (.btn), .textlink CTAs,
   .ledger-link, the final CTA block (#next) or the footer.
   Uses existing tokens only. Visited links keep the same colour. */
.ed .ch-inner :is(p,li,td) a:not(.btn):not(.textlink):not(.ledger-link),
.ed .ch-inner :is(p,li,td) a:not(.btn):not(.textlink):not(.ledger-link):visited{
  color:var(--gulf);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:rgba(23,105,138,.45);border-bottom:0;
  transition:color .15s ease,text-decoration-color .15s ease}
.ed .ch-inner :is(p,li,td) a:not(.btn):not(.textlink):not(.ledger-link):hover{
  color:var(--gulf-deep);text-decoration-color:currentColor}
.ed .ch-inner :is(p,li,td) a:not(.btn):not(.textlink):not(.ledger-link):focus-visible{
  outline:2px solid var(--gulf);outline-offset:3px;border-radius:2px;text-decoration-color:currentColor}
.ed .ch.on-ink .ch-inner :is(p,li,td) a:not(.btn):not(.textlink):not(.ledger-link),
.ed .ch.on-ink .ch-inner :is(p,li,td) a:not(.btn):not(.textlink):not(.ledger-link):visited{
  color:var(--sky-lt);text-decoration-color:rgba(168,212,238,.5)}
.ed .ch.on-ink .ch-inner :is(p,li,td) a:not(.btn):not(.textlink):not(.ledger-link):hover{color:#fff;text-decoration-color:currentColor}
.ed .ch.on-ink .ch-inner :is(p,li,td) a:not(.btn):not(.textlink):not(.ledger-link):focus-visible{outline-color:var(--sky-lt)}

/* ---- Mobile -------------------------------------------------------- */
@media(max-width:760px){
  .ed .ch-inner>*{max-width:none}
}