/* ============================================================
   The standard page (BIF-12)
   A specification is a long read, so the job here is legibility:
   a single measured column, generous rhythm, and tables that stay
   readable at the width a browser gives them.
   ============================================================ */

/* ---------- hero ---------- */
.std-hero{padding:64px 0 8px;}
.std-hero-in{max-width:780px;}
.std-h1{font-family:var(--display);font-weight:700;font-size:44px;line-height:1.1;letter-spacing:-1.5px;margin-bottom:22px;}
.std-lede{font-size:17.5px;color:var(--muted);line-height:1.7;max-width:66ch;margin-bottom:16px;}
.std-lede:last-of-type{margin-bottom:0;}
.std-meta{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:30px;padding-top:22px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:12.5px;color:var(--muted-2);}
.std-meta b{font-weight:500;color:var(--text-2);margin-right:6px;}

/* ---------- why it exists ---------- */
.std-why{padding-top:64px;}
.std-why-head{max-width:640px;margin-bottom:32px;}
.std-why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:900px;}
.std-why-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px 26px;}
.std-why-card h3{font-family:var(--display);font-size:17px;font-weight:600;margin-bottom:9px;}
.std-why-card p{font-size:14.5px;color:var(--muted);line-height:1.65;}

.std-open{max-width:720px;margin-top:56px;padding-left:22px;border-left:3px solid var(--green);}
.std-open h2{font-family:var(--display);font-size:24px;font-weight:700;letter-spacing:-.5px;margin-bottom:14px;}
.std-open p{font-size:15.5px;color:var(--muted);line-height:1.7;margin-bottom:14px;}
.std-open p:last-child{margin-bottom:0;}

/* ---------- the specification ---------- */
.std-spec-wrap{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.std-spec-head{max-width:760px;margin-bottom:44px;}
.std-spec-head .section-sub{font-family:var(--mono);font-size:12.5px;line-height:1.7;max-width:none;overflow-wrap:break-word;}

/* the document itself: one measured column, nothing decorative */
.std-doc{max-width:760px;font-size:16px;line-height:1.75;color:var(--text-2);}
.std-doc h1{font-family:var(--display);font-size:34px;font-weight:700;letter-spacing:-1px;line-height:1.15;
  color:var(--text);margin:0 0 18px;}
.std-doc h2{font-family:var(--display);font-size:25px;font-weight:700;letter-spacing:-.6px;line-height:1.2;
  color:var(--text);margin:56px 0 16px;padding-top:26px;border-top:1px solid var(--line);}
.std-doc h3{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.3px;
  color:var(--text);margin:38px 0 12px;}
.std-doc h4{font-family:var(--display);font-size:16px;font-weight:600;color:var(--text);margin:28px 0 10px;}
.std-doc p{margin-bottom:18px;}
.std-doc strong{color:var(--text);font-weight:600;}
.std-doc a{color:var(--blue);border-bottom:1px solid rgba(20,136,196,.3);}
.std-doc a:hover{border-bottom-color:var(--blue);}
.std-doc ul,.std-doc ol{margin:0 0 20px 22px;}
.std-doc li{margin-bottom:8px;}
.std-doc hr{border:none;border-top:1px solid var(--line);margin:38px 0;}
.std-doc code{font-family:var(--mono);font-size:.88em;background:var(--bg);border:1px solid var(--line);
  border-radius:5px;padding:1.5px 6px;color:var(--text);white-space:nowrap;}
.std-doc pre{background:var(--ink-panel);border-radius:12px;padding:20px 22px;overflow-x:auto;margin-bottom:22px;}
.std-doc pre code{background:none;border:none;padding:0;color:#C9D3E0;font-size:13.5px;line-height:1.7;white-space:pre;}
.std-doc blockquote{margin:0 0 22px;padding:14px 20px;background:var(--bg);border-left:3px solid var(--blue);
  border-radius:0 10px 10px 0;font-size:15px;color:var(--muted);}
.std-doc blockquote code{white-space:normal;}

/* tables: a spec is full of them, and several are wide */
.std-doc .md-table-wrap{overflow-x:auto;margin-bottom:24px;border:1px solid var(--line);border-radius:11px;}
.std-doc table{width:100%;border-collapse:collapse;font-size:14px;}
.std-doc th{text-align:left;font-family:var(--body);font-weight:600;font-size:12px;letter-spacing:.4px;
  text-transform:uppercase;color:var(--muted-2);background:var(--bg);padding:11px 15px;
  border-bottom:1px solid var(--line);white-space:nowrap;}
.std-doc td{padding:11px 15px;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.6;}
.std-doc tr:last-child td{border-bottom:none;}
.std-doc td code{white-space:nowrap;}

/* the archetype definitions read better as cards than as running text */
.std-doc h3 + p strong:first-child{color:var(--blue);}

/* ---------- cta ---------- */
.std-cta-wrap{padding-top:80px;}
.std-cta{text-align:center;max-width:760px;margin:0 auto;}
.std-cta .section-title{margin-bottom:14px;}
.std-cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
.std-cta-note{margin-top:24px;font-size:13.5px;color:var(--muted-2);}
.std-cta-note a{color:var(--blue);}

@media (max-width:900px){
  .std-h1{font-size:31px;}
  .std-lede{font-size:16px;}
  .std-why-grid{grid-template-columns:1fr;}
  .std-doc{font-size:15.5px;}
  .std-doc h1{font-size:27px;}
  .std-doc h2{font-size:21px;margin-top:44px;}
  .std-doc h3{font-size:17.5px;}
}