/* Modality — blog layout. Loads after legal.css and reuses its brand tokens
   (--accent-txt / --muted are the accessibility-corrected ones). */

.wrap{max-width:800px}

/* ---- breadcrumbs ---- */
.crumbs{font-size:13px;color:var(--muted);margin-bottom:16px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--accent-txt)}
.crumbs span{margin:0 6px;opacity:.6}

/* ---- category chip ---- */
.cat{
  display:inline-block;background:var(--panel2);border:1px solid var(--line);
  color:var(--accent-txt);font-size:11.5px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;padding:4px 10px;border-radius:999px;margin-bottom:12px;
}

/* ---- article ---- */
.article h1{font-size:clamp(27px,4vw,36px);line-height:1.15;margin:0 0 10px}
.article .meta{color:var(--muted);font-size:13px;margin:0 0 22px}
.article .lede{
  font-size:17.5px;color:var(--txt);line-height:1.6;font-weight:500;
  padding:16px 18px;background:var(--panel2);border-radius:12px;
  border-left:3px solid var(--accent);margin:0 0 26px;
}
.article h2{
  font-size:20px;margin:32px 0 10px;padding-top:0;border-top:none;
  letter-spacing:-.02em;
}
.article p{font-size:16px;line-height:1.7;margin:0 0 15px}
.article ul{margin:0 0 18px;padding-left:20px}
.article li{font-size:16px;line-height:1.65;margin:8px 0}
.article li::marker{color:var(--accent)}

/* ---- in-article CTA ---- */
.cta{
  display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  background:linear-gradient(135deg,rgba(45,212,191,.14),rgba(255,122,92,.11));
  border:1px solid var(--line);border-radius:16px;padding:22px 24px;margin:34px 0 0;
}
.cta > div{flex:1;min-width:210px}
.cta b{font-size:16.5px;letter-spacing:-.02em;display:block;margin-bottom:4px}
.cta p{margin:0;font-size:14px;color:var(--muted);line-height:1.5}
.cta-btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--coral),var(--gold));
  /* dark ink, not white: white is 1.6–2.6:1 on this coral→gold ramp */
  color:#123536;text-decoration:none;font-weight:650;font-size:14.5px;
  padding:13px 22px;border-radius:999px;white-space:nowrap;
  box-shadow:0 8px 24px rgba(255,122,92,.3);
  transition:transform .15s;
}
.cta-btn:hover{transform:translateY(-2px)}

/* ---- related ---- */
.related{margin-top:34px;padding-top:24px;border-top:1px solid var(--line)}
.related h2{font-size:17px;margin:0 0 14px;padding:0;border:none}
.rel{
  display:block;text-decoration:none;padding:13px 15px;border-radius:12px;
  border:1px solid var(--line);background:var(--panel2);margin-bottom:9px;
  transition:border-color .15s;
}
.rel:hover{border-color:var(--accent)}
.rel b{display:block;color:var(--txt);font-size:14.5px;letter-spacing:-.01em;margin-bottom:2px}
.rel span{display:block;color:var(--muted);font-size:12.5px;line-height:1.45}

/* ---- index ---- */
.cats{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 26px}
.cats .chip{
  background:var(--panel2);border:1px solid var(--line);color:var(--muted);
  font-size:12px;font-weight:600;padding:5px 12px;border-radius:999px;
}
.list{display:flex;flex-direction:column;gap:11px}
.item{
  display:block;text-decoration:none;padding:18px 20px;border-radius:14px;
  border:1px solid var(--line);background:var(--panel2);
  transition:border-color .15s, transform .15s;
}
.item:hover{border-color:var(--accent);transform:translateY(-2px)}
.item .cat{margin-bottom:8px}
.item b{display:block;color:var(--txt);font-size:17px;letter-spacing:-.02em;
  line-height:1.3;margin-bottom:5px}
.item .ex{display:block;color:var(--muted);font-size:14px;line-height:1.5;margin-bottom:8px}
.item time{color:var(--muted);font-size:12px}

@media (max-width:600px){
  .cta{padding:18px}
  .cta-btn{width:100%}
  .article .lede{font-size:16px;padding:14px 15px}
}