/* Styles for content pages (legal pages and blog), on top of site.css. Loaded only on those pages. */
.legal{padding:64px 0 96px}
.legal-in{max-width:760px;margin:0 auto;padding:0 32px}
.legal h1{font-size:clamp(36px,5vw,54px);margin:16px 0 8px}
.legal h2{font-size:28px;margin:52px 0 14px;line-height:1.15}
.legal h3{font-size:21px;margin:34px 0 10px;line-height:1.2}
.legal h4{font-family:var(--sans);font-size:16px;font-weight:700;margin:26px 0 8px}
.legal p,.legal li{font-size:16.5px;line-height:1.72;color:#2E362F}
.legal p{margin:0 0 14px}
.legal ul,.legal ol{margin:0 0 18px;padding-left:24px;display:flex;flex-direction:column;gap:6px}
.legal a{color:var(--green-deep);text-decoration:underline;text-decoration-color:var(--green-tint-2);text-underline-offset:3px;text-decoration-thickness:2px}
.legal a:hover{text-decoration-color:var(--green)}
.legal strong{font-weight:600;color:var(--ink)}
.legal hr{border:0;border-top:1px solid var(--line);margin:44px 0}
.legal blockquote{margin:0 0 18px;padding:18px 22px;background:var(--green-tint);border-left:3px solid var(--green);border-radius:0 10px 10px 0}
.legal blockquote p:last-child{margin-bottom:0}
.legal code{font-size:.9em;background:var(--green-tint);padding:1px 6px;border-radius:5px}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:6px 0 22px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.legal table{border-collapse:collapse;width:100%;min-width:520px}
.legal th,.legal td{text-align:left;vertical-align:top;padding:12px 16px;font-size:15px;line-height:1.55;border-bottom:1px solid var(--line-soft)}
.legal th{font-weight:600;background:var(--green-tint);color:var(--green-ink)}
.legal tr:last-child td{border-bottom:0}
@media(max-width:760px){
  .legal{padding:40px 0 64px}
  .legal-in{padding:0 20px}
  .legal h2{font-size:24px;margin-top:40px}
}

/* ---------- blog: index ---------- */
.blog-hero{position:relative;overflow:hidden;padding:72px 0 56px;border-bottom:1px solid var(--line-soft);background:linear-gradient(180deg,var(--green-tint) 0%,var(--bg) 100%)}
.blog-hero .dots{position:absolute;inset:0;-webkit-mask-image:radial-gradient(ellipse 80% 90% at 20% 20%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 80% 90% at 20% 20%,#000 30%,transparent 80%)}
.blog-hero .wrap{position:relative}
.blog-hero h1{font-size:clamp(34px,4.8vw,58px);line-height:1.06;margin:14px 0 0;max-width:22ch}
.nowrap{white-space:nowrap}
.post-dek{font-size:19px;line-height:1.55;color:var(--muted);margin:16px 0 0;max-width:60ch}
.blog-hero-meta{margin-top:18px;font-size:14.5px;color:var(--faint)}
.blog-hero-meta a{color:var(--green-deep);font-weight:600}
.blog-list{padding-top:44px;padding-bottom:96px}
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:24px}
.post-empty{color:var(--muted)}

/* topic filter (shown once there are 2+ articles; wired up in site.js) */
.tag-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.tag-filter button{font:600 13.5px/1 var(--sans);color:var(--green-deep);background:var(--paper);border:1px solid var(--green-tint-2);border-radius:999px;padding:9px 15px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.tag-filter button:hover{border-color:var(--green)}
.tag-filter button[aria-pressed="true"]{background:var(--green-deep);border-color:var(--green-deep);color:#fff}

/* article card */
.post-card{border-radius:22px;background:var(--paper);border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden;transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s,border-color .25s}
.post-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--green-tint-2)}
.post-card[hidden]{display:none}
.post-card-link{display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none}
.post-cover{position:relative;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;min-height:170px;padding:22px 24px;overflow:hidden;
  background:radial-gradient(120% 120% at 100% 0%,#3F8F6B 0%,transparent 55%),linear-gradient(150deg,#1E4A37,#2B6149)}
/* four brand-green cover variants so a grid of cards doesn't look identical (picked per slug in build.py) */
.post-cover.v2{background:radial-gradient(120% 120% at 0% 0%,#5FB58C 0%,transparent 50%),linear-gradient(200deg,#1E4A37,#2B6149)}
.post-cover.v3{background:radial-gradient(110% 120% at 100% 100%,#3F8F6B 0%,transparent 55%),linear-gradient(160deg,#10271D,#1E4A37)}
.post-cover.v4{background:radial-gradient(120% 120% at 50% 120%,#5FB58C 0%,transparent 55%),linear-gradient(140deg,#2B6149,#1E4A37)}
.post-cover::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.08) 1.1px,transparent 1.4px);background-size:13px 13px}
.post-cover-label{position:relative;font-family:var(--serif);font-size:30px;font-weight:500;line-height:1.05;color:#fff;letter-spacing:-.01em;max-width:12ch}
.post-cover img{position:relative;width:72px;height:72px;border-radius:21%;box-shadow:0 14px 28px -12px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.18);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.post-card:hover .post-cover img{transform:rotate(-6deg) scale(1.06)}
.post-card-body{display:flex;flex-direction:column;flex:1;padding:22px 24px 22px}
.post-tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px;padding:0}
.post-tags li{font-size:12px;font-weight:600;letter-spacing:.01em;color:var(--green-deep);background:var(--green-tint);border:1px solid var(--green-tint-2);border-radius:999px;padding:4px 10px;white-space:nowrap}
.post-card-title{font-family:var(--serif);font-size:23px;font-weight:500;line-height:1.18;margin:0;letter-spacing:-.005em}
.post-card-desc{font-size:15.5px;line-height:1.55;color:var(--muted);margin:10px 0 0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post-card-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:auto;padding-top:20px;font-size:13.5px;color:var(--faint)}
.post-more{font-size:14.5px;font-weight:600;color:var(--green-deep);white-space:nowrap}
.post-card:hover .post-more{text-decoration:underline;text-underline-offset:3px}

/* latest article: full-width, cover beside the text */
@media(min-width:861px){
  .post-card.is-featured{grid-column:1/-1}
  .post-card.is-featured .post-card-link{flex-direction:row}
  .post-card.is-featured .post-cover{flex:0 0 42%;min-height:340px;flex-direction:column;align-items:flex-start;justify-content:space-between;padding:32px}
  .post-card.is-featured .post-cover img{width:112px;height:112px;order:-1}
  .post-card.is-featured .post-cover-label{font-size:44px}
  .post-card.is-featured .post-card-body{padding:34px 36px}
  .post-card.is-featured .post-card-title{font-size:34px}
  .post-card.is-featured .post-card-desc{font-size:17px;-webkit-line-clamp:4}
}

/* chips on the article page and in related cards: beat the generic .legal list/paragraph styles */
.legal ul.post-tags{flex-direction:row;flex-wrap:wrap;gap:6px;padding:0;margin:0 0 14px}
.legal ul.post-tags li{font-size:12px;line-height:1.4;color:var(--green-deep)}
.legal .post-card-desc{font-size:15.5px;line-height:1.55;color:var(--muted);margin:10px 0 0}
.legal ul.post-tags-article{margin:14px 0 0}

/* ---------- blog: article ---------- */
.crumbs{display:flex;gap:8px;font-size:13.5px;color:var(--faint);margin-bottom:6px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--green-deep)}
.post h1{font-size:clamp(34px,4.6vw,50px);line-height:1.08;margin:10px 0 0}
.post .post-dek{margin-top:16px}
.post-byline{display:flex;align-items:center;gap:12px;margin:24px 0 0;padding:18px 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);font-size:14.5px;line-height:1.45;color:var(--muted)}
.post-byline img{width:40px;height:40px;border-radius:50%;object-fit:cover}
.post-byline a{color:var(--ink);font-weight:600;text-decoration:none}
.post-toc{margin:28px 0 0;padding:20px 24px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r)}
.post-toc b{display:block;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--green-deep);margin-bottom:10px}
.post-toc ul{margin:0;padding:0;list-style:none;gap:6px}
.post-toc li{font-size:15px;line-height:1.5}
.post-toc a{text-decoration:none;color:var(--ink)}
.post-toc a:hover{color:var(--green-deep);text-decoration:underline}
.post-body{margin-top:8px}
.post-body h2{scroll-margin-top:96px}
.post-body p,.post-body li{font-size:17.5px;line-height:1.75}
.post-cta{margin:52px 0 0;padding:32px 30px;border-radius:18px;background:var(--green-ink);color:#CFE3D6}
.post-cta .eyebrow{color:#9FD8BB}
.post-cta h2{color:#fff;font-size:28px;margin:10px 0 10px}
.legal .post-cta p{color:#CFE3D6;font-size:16.5px}
.post-cta .btn{margin-top:8px;background:var(--paper);color:var(--green-ink);text-decoration:none}
.post-cta .btn:hover{background:#fff;color:var(--green-ink)}
.post-author{display:flex;gap:18px;align-items:flex-start;margin:28px 0 0;padding:24px;border:1px solid var(--line);border-radius:var(--r);background:var(--paper)}
.post-author img{width:88px;height:88px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.post-author b{font-family:var(--serif);font-size:21px;font-weight:500}
.legal .post-author p{font-size:15px;line-height:1.6;color:var(--muted);margin:6px 0 8px}
.post-author a{font-size:14.5px;font-weight:600}
.legal .post-note{font-size:13.5px;color:var(--faint);margin:24px 0 0}
.post-draft{background:#FFF4CC;border:1px solid #F0D98A;color:#5C4A00;border-radius:10px;padding:10px 14px;font-size:14px;margin-bottom:22px}
.post-related{padding:64px 32px 8px;border-top:1px solid var(--line-soft);margin-top:64px}
.post-related h2{font-size:30px}
@media(max-width:760px){
  .post-body p,.post-body li{font-size:17px}
  .post-author{flex-direction:column}
  .post-cta{padding:26px 22px}
  .post-related{padding:44px 20px 0}
  .blog-hero{padding:44px 0 36px}
  .blog-list{padding-top:28px;padding-bottom:64px}
  .post-grid{grid-template-columns:1fr}
  .post-cover{min-height:140px}
  .post-cover-label{font-size:26px}
}