/* ---------- pressure / method ---------- */
.method,.tint{background:var(--blue-50)}
.psi{display:grid;gap:1.1rem;margin-top:2.5rem}
@media(min-width:820px){.psi{grid-template-columns:repeat(3,1fr)}}
.psi-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);
  padding:1.6rem;box-shadow:var(--shadow)}
.psi-card.lead{border-color:var(--blue-500);box-shadow:0 4px 10px rgba(8,119,193,.10),0 24px 48px -18px rgba(8,119,193,.35)}
.psi-card h3{margin:.7rem 0 .45rem}
.psi-card p{margin:0;font-size:var(--fs-sm);color:var(--ink-2)}
/* Must outrank `.psi-card p`, which would otherwise clamp the number to .98rem. */
.psi-card p.psi-num{font-size:var(--fs-figure);font-weight:800;color:var(--blue-800);
  letter-spacing:-.04em;line-height:.95}
.psi-card.lead p.psi-num{color:var(--blue-700)}
.psi-card .psi-unit{display:block;font-size:var(--fs-xs);font-weight:700;color:var(--ink-2);
  letter-spacing:.06em;text-transform:uppercase;margin-top:.3rem}

/* ---------- before / after ---------- */
.ba-stage{position:relative;border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow-lg);
  margin-top:2.5rem;aspect-ratio:4/3;background:var(--blue-900)}
@media(min-width:760px){.ba-stage{aspect-ratio:16/9}}
.ba-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 62%}
.ba-top{clip-path:inset(0 0 0 var(--split,50%))}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;
  -webkit-appearance:none;appearance:none;background:transparent;z-index:3}
.ba-range::-webkit-slider-thumb{-webkit-appearance:none;width:56px;height:100%;cursor:ew-resize}
.ba-range::-moz-range-thumb{width:56px;height:220px;border:0;background:transparent;cursor:ew-resize}
.ba-handle{position:absolute;top:0;bottom:0;left:var(--split,50%);width:3px;
  background:var(--white);z-index:2;pointer-events:none;box-shadow:0 0 0 1px rgba(5,47,77,.28)}
.ba-grip{position:absolute;top:50%;left:50%;translate:-50% -50%;width:52px;height:52px;
  border-radius:50%;background:var(--white);display:grid;place-items:center;color:var(--blue-800);
  box-shadow:0 3px 6px rgba(5,47,77,.20),0 14px 30px -8px rgba(5,47,77,.45)}
.ba-range:focus-visible + .ba-handle .ba-grip{outline:3px solid var(--blue-500);outline-offset:3px}
.ba-tag{position:absolute;top:1rem;z-index:2;padding:.4rem .85rem;border-radius:var(--r-pill);
  font-size:var(--fs-label);font-weight:800;letter-spacing:.09em;text-transform:uppercase;pointer-events:none}
.ba-before{left:1rem;background:var(--grime);color:#CFE0CB}
.ba-after{right:1rem;background:var(--white);color:var(--blue-800)}
.ba-cap{margin:1rem 0 0;font-size:var(--fs-xs);color:var(--ink-2)}

.pairs{display:grid;gap:1.6rem;margin-top:3rem}
@media(min-width:700px){.pairs{grid-template-columns:1fr 1fr}}
.pair figure{margin:0}
.pair-imgs{display:grid;grid-template-columns:1fr 1fr;gap:3px;border-radius:var(--r-card);
  overflow:hidden;box-shadow:var(--shadow);background:var(--line)}
.pair-imgs > div{position:relative;aspect-ratio:4/3}
.pair-imgs img{width:100%;height:100%;object-fit:cover}
.pair-imgs .lbl{position:absolute;left:.5rem;bottom:.5rem;font-size:var(--fs-label);font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;padding:.24rem .55rem;border-radius:var(--r-chip)}
.lbl-b{background:var(--grime);color:#CFE0CB}
.lbl-a{background:var(--white);color:var(--blue-800)}
.pair figcaption{margin-top:.7rem;font-size:var(--fs-sm);color:var(--ink-2);font-weight:600}

/* ---------- services ---------- */
/* Centred wrap, not a rigid 3-up grid. Seven cards in a fixed grid leave a lone
   card hanging on the left of the last row, which reads like a mistake. Centring
   the remainder makes any odd count look deliberate, at any card count. */
.svcs{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem;margin-top:2.75rem}
.svc{flex:1 1 290px;max-width:350px;
  display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-card);overflow:hidden;box-shadow:var(--shadow);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--blue-300)}
.svc > img{aspect-ratio:16/10;object-fit:cover;width:100%}
.svc-body{padding:1.4rem 1.5rem 1.6rem;display:flex;flex-direction:column;flex:1}
.svc-body h3{margin-bottom:.5rem}
.svc-body p{font-size:var(--fs-sm);color:var(--ink-2);margin-bottom:1.1rem}
/* Anchors the card and turns every service into a route to the one CTA.
   Prices are deliberately unpublished, see PRODUCT.md. */
.svc-cta{margin-top:auto;padding-top:1rem;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:.4rem;font-weight:700;color:var(--blue-700);
  text-decoration:none;font-size:var(--fs-sm);min-height:48px}
.svc-cta svg{transition:transform .18s ease}
.svc-cta:hover{color:var(--blue-800)}
.svc:hover .svc-cta svg,.svc-cta:hover svg{transform:translateX(4px)}
.min-note{margin-top:2rem;padding:1.1rem 1.35rem;background:var(--blue-50);
  border:1px solid var(--blue-200);border-radius:var(--r-control);font-size:var(--fs-sm);max-width:none}
.min-note strong{color:var(--blue-800)}

/* ---------- plants / promise ---------- */
.promise{background:var(--blue-900);color:var(--white)}
.promise h2{max-width:19ch}
.promise .lede{color:var(--blue-100)}
.promise-grid{display:grid;gap:2.5rem;align-items:center}
@media(min-width:900px){.promise-grid{grid-template-columns:1.05fr .95fr;gap:4rem}}
.promise img{border-radius:var(--r-card);box-shadow:var(--shadow-lg)}
.steps{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1.1rem}
.steps li{display:flex;gap:.9rem;align-items:flex-start;color:var(--blue-100);font-size:var(--fs-sm)}
.steps svg{flex:none;margin-top:.2rem;color:var(--blue-500)}

/* ---------- areas ---------- */
/* One flat chip row for all nine towns, owner priority order. Centred wrap
   makes any count look deliberate. */
.areas{list-style:none;margin:2.5rem 0 0;padding:0;display:flex;flex-wrap:wrap;
  gap:.8rem;justify-content:center}
.areas li{background:var(--blue-50);border:1px solid var(--line);border-radius:var(--r-chip);
  padding:.7rem 1.3rem;font-size:var(--fs-body);font-weight:600;color:var(--ink-2)}

/* ---------- reviews ---------- */
.rev-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:1.75rem 3rem;margin-bottom:2.5rem}
.rev-score{display:flex;align-items:center;gap:.7rem}
.rev-score-num{font-size:var(--fs-figure);font-weight:800;color:var(--blue-800);letter-spacing:-.03em;
  line-height:.9}
.rev-score-meta{display:flex;flex-direction:column;gap:.3rem}
/* Drawn 5-star row: an outline track and a clipped fill layer stacked on top,
   width set by --fill so a fractional rating (4.7/5) reads as a partial star. */
.rev-stars{position:relative;display:inline-flex;line-height:0}
.rev-stars-row{display:flex;gap:.15rem}
.rev-stars-track svg{color:var(--line)}
.rev-stars-fill{position:absolute;inset:0;overflow:hidden;width:var(--fill,100%)}
.rev-stars-fill svg{color:var(--blue-700)}
.rev-score-count{font-size:var(--fs-xs);color:var(--ink-2);font-weight:600}
.rev-grid{display:grid;gap:1.35rem}
@media(min-width:700px){.rev-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1080px){.rev-grid{grid-template-columns:repeat(3,1fr)}}
.rev-card{margin:0;padding:1.5rem;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-card);box-shadow:var(--shadow)}
.rev-card p{margin:0;font-size:var(--fs-sm);color:var(--ink);line-height:1.55}
.rev-card cite{display:block;margin-top:1rem;font-style:normal;font-weight:700;
  font-size:var(--fs-xs);color:var(--ink-2)}

/* ---------- form ---------- */
.quote{background:var(--blue-50)}
.quote-grid{display:grid;gap:2.5rem}
@media(min-width:900px){.quote-grid{grid-template-columns:1fr 1fr;gap:4rem;align-items:start}}
.form-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);
  padding:clamp(1.5rem,3.5vw,2.25rem);box-shadow:var(--shadow-lg)}
.field{margin-bottom:1.15rem}
.field label{display:block;font-weight:700;margin-bottom:.4rem;font-size:var(--fs-sm)}
.field input,.field textarea{width:100%;padding:.9rem 1rem;font-size:16px;font-family:inherit;
  color:var(--ink);border:2px solid var(--line);border-radius:var(--r-field);background:var(--white);
  transition:border-color .16s ease,box-shadow .16s ease}
.field textarea{resize:vertical;min-height:110px}
.field input::placeholder,.field textarea::placeholder{color:#6B7C86}
.field input:hover,.field textarea:hover{border-color:var(--blue-300)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--blue-700);
  box-shadow:0 0 0 4px rgba(8,119,193,.16)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#9B1C1C}
.err{display:none;margin:.4rem 0 0;font-size:var(--fs-xs);font-weight:600;color:#9B1C1C}
.err.on{display:block}
.form-card .btn-solid{width:100%}
.form-foot{margin:.95rem 0 0;font-size:var(--fs-xs);color:var(--ink-2);text-align:center}
.success{display:none;text-align:center;padding:1rem 0}
.success.on{display:block}
.success svg{color:var(--blue-700);margin-inline:auto}
.success h3{margin:1rem 0 .6rem}
.success p{margin-inline:auto}
.contact-list{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1.35rem}
.contact-list li{display:flex;gap:.9rem;align-items:flex-start}
.contact-list svg{flex:none;margin-top:.25rem;color:var(--blue-700)}
.contact-list b{display:block;font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-2)}
/* Inline-block + padding so every touch target clears 48px on a phone. */
.contact-list a{display:inline-block;font-size:var(--fs-lead);font-weight:700;color:var(--blue-800);
  text-decoration:none;letter-spacing:-.01em;padding:.55rem 0;min-height:48px}
.contact-list a:hover{color:var(--blue-700);text-decoration:underline}
.contact-list span{font-size:var(--fs-sm)}

/* ---------- footer ---------- */
.ftr{background:var(--blue-900);color:var(--blue-100);padding-block:3.5rem 7rem}
@media(min-width:900px){.ftr{padding-bottom:3.5rem}}
.ftr-grid{display:grid;gap:2.5rem}
@media(min-width:760px){.ftr-grid{grid-template-columns:auto 1fr auto;gap:3rem;align-items:start}}
.ftr img.mark{height:120px;width:auto}
.ftr h3{color:var(--white);font-size:var(--fs-sm);margin-bottom:.8rem;letter-spacing:.04em;
  text-transform:uppercase}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.ftr a{display:inline-block;color:var(--blue-100);text-decoration:none;padding:.7rem 0;min-height:48px}
.ftr a:hover{color:var(--white);text-decoration:underline}
.ftr .tel{font-size:var(--fs-lead);font-weight:800;color:var(--white);letter-spacing:-.02em}
.ftr li:not(:has(a)){padding:.28rem 0}
.nav a{padding:.75rem 0}
.ftr-base{margin-top:3rem;padding-top:1.75rem;border-top:1px solid rgba(163,211,226,.2);
  display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;justify-content:space-between;font-size:var(--fs-xs)}

/* ---------- sticky mobile CTA ---------- */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:120;display:grid;grid-template-columns:1fr 1fr;
  gap:.6rem;padding:.6rem;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);box-shadow:0 -2px 6px rgba(5,47,77,.08)}
.sticky .btn{min-height:52px;font-size:var(--fs-sm);padding:.7rem .9rem}
@media(min-width:900px){.sticky{display:none}}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .btn:hover,.svc:hover{transform:none}
}

/* ============================================================
   TEMPLATE COMPONENTS
   Added in Session 2 for the service, combo, area and flat pages.
   NONE of these selectors is used by the homepage, so the approved
   index.html rendering is untouched.

   Rules that bind here, same as everywhere else:
   - Sampled Palette: every colour below is an existing token. No new hue.
   - The Grime Rule: --grime stays on the two BEFORE markers it already has
     (.ba-before, .lbl-b). Nothing below may use it.
   - Contrast Pairing: white sits on --blue-700 or darker, never --blue-500.
   - Reach: 48px targets, 54px buttons.
   ============================================================ */

/* current page in the header nav. Matches the existing hover treatment so the
   nav gains a state without gaining a look. */
.nav a.on{color:var(--blue-700);border-bottom-color:var(--blue-700)}

/* ---------- subpage hero ---------- */
/* Same scrim construction as .hero so a service page reads as the same site,
   at a shorter height because it carries breadcrumbs rather than a full pitch. */
.page-hero{position:relative;color:var(--white);isolation:isolate;
  padding-block:clamp(2.75rem,6.5vw,4.5rem);background:var(--blue-900)}
.page-hero .bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  object-position:50% 45%}
.page-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(5,47,77,.94) 0%,rgba(5,47,77,.88) 42%,
    rgba(5,47,77,.66) 72%,rgba(5,47,77,.46) 100%)}
@media(max-width:759px){
  .page-hero::after{background:linear-gradient(180deg,rgba(5,47,77,.92) 0%,rgba(5,47,77,.88) 45%,
    rgba(5,47,77,.70) 100%)}
}
.page-hero h1{max-width:20ch}
.page-hero .lede{color:var(--blue-100);max-width:56ch}
.page-hero .hero-cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.9rem}
.page-hero .hero-cta .btn{flex:1 1 240px}

/* ---------- breadcrumbs ---------- */
.crumbs{font-size:var(--fs-xs);color:var(--blue-200);margin-bottom:1.1rem;line-height:1.5}
.crumbs a{color:var(--blue-100);text-decoration:none;display:inline-block;padding:.15rem 0}
.crumbs a:hover{color:var(--white);text-decoration:underline}
.crumbs .sep{padding:0 .45rem;opacity:.6}

/* ---------- section furniture ---------- */
.center{text-align:center}
.center p,.center .lede{margin-inline:auto}
.eyebrow{display:inline-block;font-size:var(--fs-label);font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--blue-700);margin-bottom:.7rem}
.sec{margin-bottom:.9rem}
.sub{font-size:var(--fs-lede);color:var(--ink-2);max-width:62ch;margin-bottom:0}
.tag{display:inline-block;font-size:var(--fs-label);font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--blue-800);background:var(--blue-50);
  border:1px solid var(--blue-200);border-radius:var(--r-chip);padding:.35rem .75rem;
  margin-bottom:1rem}
.more-link{font-weight:700;color:var(--blue-700);text-decoration:none;
  display:inline-block;padding:.7rem 0;min-height:48px}
.more-link:hover{color:var(--blue-800);text-decoration:underline}

/* ---------- long-form body ---------- */
.prose{max-width:72ch}
.prose h2{margin-bottom:.9rem}
.prose h3{margin:2rem 0 .6rem}
.prose p{color:var(--ink-2)}
.check{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:.8rem;max-width:68ch}
.check li{position:relative;padding-left:1.9rem;color:var(--ink-2);font-size:var(--fs-sm)}
/* Drawn tick rather than a glyph, so it never depends on a font. */
.check li::before{content:"";position:absolute;left:0;top:.42em;width:1.05rem;height:.55rem;
  border-left:2.5px solid var(--blue-700);border-bottom:2.5px solid var(--blue-700);
  transform:rotate(-45deg)}

/* ---------- answer-first block ---------- */
/* The straight answer, above everything else, because that is the shape an AI
   engine quotes. Composed from copy that already exists on the record. */
.answer-first{background:var(--blue-50);border-bottom:1px solid var(--line);
  padding-block:clamp(1.75rem,4vw,2.5rem)}
.answer-first h2{font-size:var(--fs-title);margin-bottom:.6rem}
.answer-first p{margin:0;max-width:80ch;font-size:var(--fs-lede);color:var(--ink-2)}

/* ---------- split: media beside copy ---------- */
.split{display:grid;gap:2.5rem;align-items:center}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr;gap:4rem}}
.split .media img{border-radius:var(--r-card);box-shadow:var(--shadow-lg);width:100%}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:.8rem;max-width:860px;margin:2.5rem auto 0;text-align:left}
.faq details{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:var(--shadow)}
.faq summary{cursor:pointer;font-weight:700;padding:1.1rem 1.4rem;list-style:none;
  min-height:48px;display:flex;align-items:center;gap:.8rem}
.faq summary::-webkit-details-marker{display:none}
/* Drawn chevron, rotates open. No glyph, no font dependency. */
.faq summary::after{content:"";margin-left:auto;flex:none;width:.6rem;height:.6rem;
  border-right:2.5px solid var(--blue-700);border-bottom:2.5px solid var(--blue-700);
  transform:rotate(45deg);transition:transform .18s ease}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary:hover{color:var(--blue-700)}
.faq .answer{padding:0 1.4rem 1.25rem}
.faq .answer p{margin:0;font-size:var(--fs-sm);color:var(--ink-2)}

/* ---------- closing CTA band ---------- */
.cta-band{background:var(--blue-900);color:var(--white);padding-block:clamp(2.5rem,5vw,3.5rem)}
.cta-band .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1.75rem}
.cta-band h2{font-size:var(--fs-headline);margin-bottom:.5rem;max-width:22ch}
.cta-band p{margin:0;color:var(--blue-100);font-size:var(--fs-sm);max-width:56ch}
.cta-band .btn{flex:none}

/* ---------- nearby areas ---------- */
.nearby{background:var(--blue-50);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.nearby h2{font-size:var(--fs-headline);margin-bottom:.6rem}
.nearby .lede{margin-top:0}
.nearby-links{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.9rem}
.nearby-links a{background:var(--white);border:1px solid var(--line);border-radius:var(--r-chip);
  padding:.7rem 1.3rem;font-size:var(--fs-sm);font-weight:600;color:var(--blue-800);
  text-decoration:none;min-height:48px;display:inline-flex;align-items:center}
.nearby-links a:hover{border-color:var(--blue-700);background:var(--blue-50);color:var(--blue-700)}

/* ---------- areas we serve: chips become links ---------- */
.areas a{color:inherit;text-decoration:none;display:block;margin:-.7rem -1.3rem;
  padding:.7rem 1.3rem;min-height:48px}
.areas li:has(a){padding:0}
.areas li:has(a):hover{border-color:var(--blue-700);background:var(--white)}
.areas li:has(a):hover a{color:var(--blue-700)}

/* county cluster groups on /areas-we-serve */
.cluster{margin-top:3rem}
.cluster h3{font-size:var(--fs-title);color:var(--blue-800);margin-bottom:.3rem}
.cluster .areas{margin-top:1.2rem;justify-content:flex-start}

/* ---------- city service cards ---------- */
/* Reuses .svcs / .svc from the homepage so a city page and the homepage show
   the same card. Only the link label differs. */

/* ---------- reviews on inner pages ---------- */
.rev-grid.one-col{grid-template-columns:1fr;max-width:760px;margin-inline:auto}
@media(min-width:700px){.rev-grid.one-col{grid-template-columns:1fr}}
@media(min-width:1080px){.rev-grid.one-col{grid-template-columns:1fr}}

/* ---------- 404 ---------- */
.page-hero.plain{background:var(--blue-900)}
.page-hero.plain::after{display:none}

/* Why-us block with no qualifying photo. Without this the single child sits in
   the first of two columns and leaves the other half empty. */
@media(min-width:900px){.promise-grid.solo{grid-template-columns:1fr}}
.promise-grid.solo h2,.promise-grid.solo .lede{max-width:60ch}

/* ---------- blog ---------- */
/* Added 2026-08-04 with the v2 folder-driven blog. Uses the tokens defined in
   critical.css, so the blog moves with the rest of the site instead of carrying
   the inline styles ACI's version of these templates ships. */

/* Reading column. .prose already clamps to 72ch, but the TL;DR box, the service
   list and the related cards sit OUTSIDE .prose and would otherwise run to the
   full 1180px wrap and read as a different page. */
.wrap-narrow{max-width:820px}

.post-meta{font-size:var(--fs-xs);color:var(--blue-200);margin:1rem 0 0}
.post-meta .sep{margin-inline:.5rem}
.post-body .post-meta,.post-list .post-meta{color:var(--ink-2)}

/* TL;DR. Every post opens with one. The left rule and the tinted panel are what
   make it read as a summary rather than as the first paragraph. */
.tldr{background:var(--blue-50);border-left:4px solid var(--blue-500);
  border-radius:0 var(--r-card) var(--r-card) 0;padding:1.35rem 1.6rem;margin-bottom:2rem}
.tldr-h{font-size:var(--fs-label);font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--blue-800);margin:0 0 .6rem}
.tldr ul{margin:0;padding-left:1.15rem}
.tldr li{margin:.35rem 0;color:var(--ink-2)}
.tldr li:last-child{margin-bottom:0}

/* Handoff into the money pages. This block is the reason the blog exists, so it
   is styled as a card rather than a footnote. */
.post-services{margin-top:2.5rem;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r-card);padding:1.5rem 1.7rem;box-shadow:var(--shadow)}
.post-services h2{font-size:1.15rem;margin:0 0 .8rem}
.post-services ul{margin:0;padding-left:1.15rem}
.post-services li{margin:.4rem 0}

.post-list,.post-related{padding-block:clamp(2.5rem,5vw,4rem)}
.post-related{background:var(--blue-50)}
.post-related h2{font-size:clamp(1.25rem,2.2vw,1.6rem);margin-bottom:1.2rem}

.post-cards{display:grid;gap:1.1rem}
.post-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-card);
  padding:1.4rem 1.6rem;box-shadow:var(--shadow)}
.post-card h2,.post-card h3{font-size:1.15rem;margin:.5rem 0 .5rem}
.post-card h2:first-child,.post-card h3:first-child{margin-top:0}
.post-card a{color:var(--blue-800);text-decoration:none}
.post-card a:hover{text-decoration:underline}
.post-card p{margin:0;font-size:var(--fs-sm);color:var(--ink-2)}
.post-card .post-meta{margin-top:.7rem}