/* Post 03 design (C4, dark green cards). Owner approved 2026-10-26.
   Loaded on post 03 only; other posts keep the shared blog styles. */

/* ---- mockup-c ---- */
/* Mockup: blog posts in the main-page type system (Fraunces + DM Sans). */
.editorial-post-shell{--tf-serif:"Fraunces",Georgia,serif;--tf-sans:"DM Sans",system-ui,-apple-system,"Segoe UI",Arial,sans-serif}
.editorial-post-shell,.editorial-breadcrumb,.editorial-meta,.editorial-share,.editorial-recent{font-family:var(--tf-sans)}
.editorial-post h1{font-family:var(--tf-serif);font-weight:400;letter-spacing:-0.025em;line-height:1.06;font-size:clamp(2rem,4.4vw,3.25rem);margin-top:.6rem}
.editorial-meta{font-size:.875rem;margin-top:.2rem}
.editorial-body{font-family:var(--tf-sans);font-size:1.0625rem;line-height:1.65}
.editorial-body .editorial-lede{font-family:var(--tf-sans);font-size:clamp(1.0625rem,1.5vw,1.1875rem);line-height:1.6;color:var(--ink)}
.editorial-body h2{font-family:var(--tf-serif);color:var(--ink);font-size:clamp(1.5rem,2.5vw,2rem);letter-spacing:-0.02em;line-height:1.15}
.editorial-recent h2,.editorial-recent h3{font-family:var(--tf-serif)}
/* One column for heading, photo and text: the photo spans exactly the hairline width. */
.editorial-post-shell{--tf-col:44rem;--tf-gutter:clamp(1rem,4vw,5rem)}
.editorial-post .editorial-post-heading,.editorial-post .editorial-post-lead{box-sizing:content-box;max-width:var(--tf-col);padding-inline:var(--tf-gutter);margin-inline:auto}
.editorial-post-shell .editorial-post .editorial-reading-layout .editorial-body,.editorial-post-shell .editorial-post .editorial-reading-layout .editorial-share{max-width:var(--tf-col)!important;width:100%;margin-inline:auto!important}
.editorial-post .editorial-reading-layout{padding-inline:var(--tf-gutter)}
.editorial-post-lead::before{display:none}
.editorial-post .editorial-post-heading{padding-bottom:clamp(1rem,2vw,1.5rem)}
.editorial-post .editorial-post-lead{margin-top:clamp(1rem,2vw,1.5rem)}
@media (max-width:760px){.editorial-breadcrumb{padding-inline:var(--tf-gutter)!important}}
.editorial-figure-lead .editorial-image{aspect-ratio:16/9}
.editorial-figure figcaption{font-size:.875rem}
@media (max-width:760px){
  .editorial-breadcrumb [aria-current],.editorial-breadcrumb [aria-hidden]{display:none}
  .editorial-breadcrumb{padding-block:.6rem}
  .editorial-avatar{display:none}
  .editorial-post-heading,.editorial-post-lead{padding-inline:1rem}
  .editorial-post{padding-top:.25rem}
}

.editorial-post h1{font-size:clamp(1.75rem,3.6vw,2.6rem)}
.editorial-breadcrumb{display:none}
.editorial-meta .tf-blog-link{color:var(--clay,#9a4f32);font-weight:600;text-decoration:none}
@media (max-width:760px){
  .editorial-post h1{font-size:1.7rem}
  .editorial-post-mobile-lead-first .editorial-post-lead{order:0;padding-block:.75rem 0;margin-top:0}
  .editorial-body{padding-top:.8rem}
}
/* ---- mockup-c3 ---- */
/* Round 2: no tinted band behind the title. */
.editorial-post .editorial-post-heading::before{display:none}
/* Main pages use no line-art sprigs, so posts drop them too. */
.editorial-post .terra-flair,.editorial-recent>.terra-flair{display:none!important}
/* Line-art sprigs drawn as on production (thin green line in the margin). */
.editorial-body h2{position:relative}
.editorial-body h2>.terra-flair-edge-branch,.editorial-recent>.terra-flair-edge-branch{height:auto;margin:0;pointer-events:none;position:absolute;top:1rem;width:clamp(11.25rem,20vw,18rem);z-index:1}
.editorial-body h2>.terra-flair-edge-right,.editorial-recent>.terra-flair-edge-right{right:clamp(1rem,5vw,4rem)}
.editorial-body h2>.terra-flair-edge-left,.editorial-recent>.terra-flair-edge-left{left:clamp(1rem,5vw,4rem)}
.terra-flair-edge-branch path{fill:none;stroke:#5f7a4b;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.15;vector-effect:non-scaling-stroke}
@media (min-width:80rem){.editorial-body h2>.terra-flair-edge-right{right:-19.25rem}.editorial-body h2>.terra-flair-edge-left{left:-19.25rem}}
@media (max-width:79.999rem){.editorial-body h2>.terra-flair-edge-branch{top:-2.5rem;width:min(10rem,32vw)}}
@media (max-width:48rem){.editorial-recent>.terra-flair-edge-branch{top:0;width:min(12rem,42vw)}}

.editorial-body .editorial-lede{background:rgb(228,234,217);border-left:3px solid rgb(95,122,75);padding:1.4rem 1.6rem;font-family:var(--tf-serif);font-size:1.3rem;line-height:1.45;letter-spacing:-0.01em;color:rgb(39,49,40);margin:0 0 2rem}
@media (max-width:760px){.editorial-body .editorial-lede{padding:1.1rem 1.15rem;font-size:1.2rem}}

/* ---- mockup-c4 ---- */
/* C4: the FAQ vine replaces the straight left rule. */
.editorial-body .editorial-lede{position:relative;border-left:0;padding-left:4.6rem;font-size:1.125rem;line-height:1.6;letter-spacing:0;color:rgb(63,77,55)}
.tf-lede-vine{position:absolute;left:.45rem;top:.9rem;width:44px;overflow:visible;pointer-events:none}
.tf-lede-vine path{fill:none;stroke:rgb(95,122,75);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.tf-lede-vine.is-armed path{stroke-dasharray:1;stroke-dashoffset:1}
.tf-lede-vine.is-drawn path{stroke-dashoffset:0;transition:stroke-dashoffset var(--d,.6s) ease-out var(--t,0s)}
@media (prefers-reduced-motion:reduce){.tf-lede-vine.is-armed path{stroke-dasharray:none;transition:none}}
/* Closing box: same sage and vine as the opening; links as the site's buttons. */
.editorial-share{display:none!important}
.tf-post-close{position:relative;background:rgb(228,234,217);padding:1.6rem 1.6rem 1.7rem 4.6rem;margin:2.75rem 0 1rem}
.tf-post-close .tf-post-close-lead{font-family:var(--tf-serif);font-size:1.375rem;line-height:1.3;letter-spacing:-0.01em;color:rgb(39,49,40);margin:0 0 1.1rem}
.tf-post-close ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.65rem}
.editorial-body .tf-post-close li,.editorial-body .tf-post-close li+li{margin:0!important;padding:0!important}
.tf-post-close li::before{content:none}
.editorial-body .tf-post-close a{display:inline-block;font-family:var(--tf-sans);font-size:.9375rem;font-weight:600;line-height:1.2;text-decoration:none;padding:.7rem 1.1rem;border:1px solid rgb(95,122,75);border-radius:4px;color:rgb(66,91,54);background:rgb(250,247,240);transition:background .2s,color .2s}
.editorial-body .tf-post-close a:hover,.editorial-body .tf-post-close a:focus-visible{background:rgb(95,122,75);color:rgb(250,247,240)}
.editorial-body .tf-post-close li:first-child a{background:rgb(95,122,75);color:rgb(250,247,240)}
.editorial-body .tf-post-close li:first-child a:hover,.editorial-body .tf-post-close li:first-child a:focus-visible{background:rgb(66,91,54)}
@media (max-width:760px){
  .editorial-body .editorial-lede{padding-left:3.6rem;font-size:1.0625rem}
  .tf-lede-vine{left:.2rem}
  .tf-post-close{padding:1.3rem 1.15rem 1.4rem 3.6rem}
  .tf-post-close .tf-post-close-lead{font-size:1.25rem}
  .tf-post-close ul{flex-direction:column;align-items:flex-start}
}

/* ---- mockup-c4-green ---- */
/* Card section on a dark backdrop. */
.editorial-recent{background:rgb(52,72,57)!important;color:rgb(250,247,240)}
.editorial-recent::before,.editorial-recent::after{display:none!important}
.editorial-recent h2,.editorial-recent h3,.editorial-recent h3 a,.editorial-recent .editorial-text-link{color:rgb(250,247,240)!important}
.editorial-recent .editorial-card-meta{color:rgba(250,247,240,.78)!important}
.editorial-recent .editorial-recent-heading{border-color:rgba(250,247,240,.35)!important}
.editorial-recent .editorial-card,.editorial-recent .editorial-recent-grid,.editorial-recent .editorial-card-copy{border-color:rgba(250,247,240,.35)!important}
.editorial-recent .editorial-text-link{text-decoration-color:rgba(250,247,240,.6)!important}
.editorial-recent h3 a:hover,.editorial-recent .editorial-text-link:hover{text-decoration:underline;text-decoration-color:rgb(250,247,240)}
.editorial-body h3{font-family:var(--tf-serif);color:var(--ink);font-size:clamp(1.2rem,1.9vw,1.45rem);font-weight:600;letter-spacing:-0.01em;line-height:1.2;margin:2rem 0 .6rem}
.editorial-body ul{margin:1rem 0 1.25rem;padding-left:1.4rem}.editorial-body li{margin:.35rem 0}

/* Skip link target: focus moves here without drawing a ring around the page */
#main-content:focus { outline: none; }