/* Blog styles. Same tokens as the rest of the site, see DESIGN.md.
   Safe to edit: nothing in build.mjs depends on the values in here. */
:root{
  --primary:#161616; --accent:#8A5B12; --brass:#D99A2E; --cta:#D99A2E; --cta-ink:#161616;
  --ink:#1C1B19; --muted:#5E5A52; --paper:#F8F6F1; --wash:#EDE9E0;
  --line:color-mix(in srgb, var(--ink) 14%, var(--paper));
  --head:"Fraunces", Georgia, "Times New Roman", serif;
  --body:"Public Sans", "Helvetica Neue", Helvetica, sans-serif;
  --radius:4px; --w:820px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--body);color:var(--ink);background:var(--paper);font-size:18px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--head);font-weight:600;font-optical-sizing:auto;line-height:1.1;
  letter-spacing:-.02em;text-wrap:balance;color:var(--primary)}
h1{font-size:clamp(2.1rem,5vw,3.1rem);line-height:1.05;letter-spacing:-.025em}
h2{font-size:clamp(1.4rem,2.6vw,1.85rem);margin:1.6em 0 .5em}
h3{font-size:1.2rem;margin:1.4em 0 .4em}
p,ul,ol,blockquote{margin-bottom:18px}
ul,ol{padding-left:22px}
li{margin-bottom:8px}
blockquote{border-left:3px solid var(--brass);padding-left:20px;color:var(--muted)}
blockquote p:last-child{margin-bottom:0}
hr{border:0;border-top:1px solid var(--line);margin:32px 0}
code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.92em;background:var(--wash);
  padding:2px 5px;border-radius:3px}
.wrap{max-width:var(--w);margin:0 auto;padding:0 clamp(20px,5vw,32px)}
.skip{position:absolute;left:-999px}.skip:focus{left:16px;top:16px;background:#fff;padding:8px 12px;z-index:9}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:14px 28px;
  border-radius:var(--radius);font-weight:700;text-decoration:none;font-size:1.02rem;white-space:nowrap;
  background:var(--cta);color:var(--cta-ink);border:1px solid #A8721A;
  transition:background-color .15s,transform .15s}
.btn:hover{background:#E6AA45;transform:translateY(-1px)}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

.bar{border-bottom:1px solid var(--line);background:var(--paper)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:72px;
  max-width:1160px}
.mark{font-family:var(--head);font-size:1.35rem;font-weight:500;letter-spacing:-.015em;color:var(--primary);
  text-decoration:none;line-height:1.1;display:inline-flex;align-items:center;gap:10px}
.mark .logo{width:34px;height:40px;flex:none}
.mark b{font-weight:600}
.bar .btn{min-height:44px;padding:10px 20px;font-size:.98rem}

main{padding:clamp(44px,6vw,72px) 0}
.meta{color:var(--muted);font-size:.95rem;margin:22px 0 0;padding-top:20px;border-top:2px solid var(--primary)}
article{margin-top:clamp(28px,4vw,40px)}
article>h2:first-child,article>p:first-child{margin-top:0}
.lede{font-size:clamp(1.05rem,1.6vw,1.2rem);line-height:1.5}

/* Blog index */
.posts{list-style:none;padding:0;margin:clamp(28px,4vw,40px) 0 0}
.posts li{padding:26px 0;border-bottom:1px solid var(--line)}
.posts li:first-child{border-top:2px solid var(--primary)}
.posts h2{font-size:clamp(1.3rem,2.4vw,1.6rem);margin:0 0 6px}
.posts a{text-decoration:none}
.posts a:hover h2{text-decoration:underline;text-underline-offset:3px}
.posts .date{color:var(--muted);font-size:.9rem;margin:0 0 8px}
.posts .summary{margin:0;color:var(--ink)}
.empty{color:var(--muted);margin-top:32px}

.backlink{display:inline-block;margin-top:40px;font-weight:600;text-underline-offset:3px}
.endcta{margin-top:clamp(44px,6vw,72px);padding-top:clamp(32px,4vw,44px);border-top:2px solid var(--primary)}
.endcta h2{margin-top:0}
.endcta .row{margin-top:26px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
.endcta .tel{font-weight:600;text-decoration:none;border-bottom:1px solid var(--line);padding:10px 0}

footer.site{padding:36px 0 56px;border-top:1px solid var(--line);font-size:.92rem;color:var(--muted);
  overflow-wrap:anywhere;margin-top:clamp(36px,5vw,56px)}
footer.site a{color:var(--ink)}
.footlinks{display:flex;flex-wrap:wrap;gap:10px 26px;margin-bottom:20px;padding-bottom:18px;
  border-bottom:1px solid var(--line)}
.footlinks a{font-weight:600;text-decoration:none;border-bottom:1px solid transparent}
.footlinks a:hover{border-bottom-color:currentColor}

/* Service and About pages reuse the blog's article styling, with a lede on top. */
article h2:first-child{margin-top:0}
.summary{margin:0;color:var(--ink)}

@media (max-width:640px){
  body{font-size:17px}
  .mark{font-size:1.1rem}
  .bar .btn{padding:10px 14px;font-size:.92rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}