/* =============================================================
   BayconAI — long-form reading pages: blog index, articles, legal documents.
   Uses the shared tokens (tokens.css) and chrome (chrome.css); same type
   system as the rest of the site: Newsreader for reading and headings,
   Geist for interface text.
   ============================================================= */
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg-page); color: var(--ink-1);
  font-family: var(--font-display); font-size: 19px; line-height: 1.65;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
main { max-width: 740px; margin: 0 auto; padding: 48px 20px 80px; }
main:focus { outline: none; }
a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-press); }
.bk-header a, .bk-footer a, .bk-btn { text-decoration: none; }
.bk-btn-primary, .bk-btn-primary:hover { color: var(--ink-inv); }

.ui { font-family: var(--font-body); }
.eyebrow {
  font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--accent-press);
  text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 14px;
}
h1 {
  font-family: var(--font-display); font-weight: 400; font-size: clamp(34px, 6vw, 52px);
  line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 18px; color: var(--ink-1); text-wrap: balance;
}
.deck { font-size: 21px; line-height: 1.5; color: var(--ink-2); margin: 0 0 24px; font-style: italic; max-width: none; }
.byline {
  font-family: var(--font-body); font-size: 15px; color: var(--ink-2); margin: 0 0 32px;
  padding-bottom: 22px; border-bottom: 1px solid var(--hairline-strong);
}
.byline strong { color: var(--ink-1); font-weight: 600; }
h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(26px, 4vw, 33px); line-height: 1.2; letter-spacing: -0.01em; margin: 52px 0 14px; color: var(--ink-1); }
h3 { font-family: var(--font-display); font-weight: 500; font-size: 22px; line-height: 1.3; margin: 32px 0 10px; color: var(--ink-1); }
p { margin: 0 0 20px; max-width: none; font-size: inherit; line-height: inherit; color: inherit; }
ol, ul { margin: 0 0 24px; padding-left: 24px; }
li { margin-bottom: 10px; }
strong { font-weight: 600; }
em { color: inherit; }
code { font-family: var(--font-mono); font-size: 0.82em; background: rgba(168, 67, 31, 0.08); color: var(--accent-press); padding: 2px 6px; border-radius: 4px; overflow-wrap: anywhere; }
blockquote { margin: 28px 0; padding: 18px 22px; background: var(--bg-sunken); border-left: 4px solid var(--accent); border-radius: 4px; font-style: italic; }
hr { border: 0; border-top: 1px solid var(--hairline-strong); margin: 52px 0; }

.article-hero { margin: 0 0 40px; border-radius: 12px; overflow: hidden; background: #1c1815; }
.article-hero img { width: 100%; height: auto; }
.note {
  font-family: var(--font-body); font-size: 16px; line-height: 1.55; color: var(--ink-1);
  background: var(--bg-sunken); border: 1px solid var(--hairline-strong); border-left: 4px solid var(--accent);
  border-radius: 6px; padding: 16px 20px; margin: 0 0 32px;
}
.note b { font-weight: 600; }
.note p { margin: 0 0 8px; font-size: inherit; }
.note p:last-child { margin-bottom: 0; }
.note ul { margin: 8px 0 0; font-size: inherit; }
.obs { margin: 32px 0; background: #fff; border: 1px solid var(--hairline-strong); border-radius: 10px; padding: 22px 26px; }
.obs .label { font-family: var(--font-body); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-press); margin-bottom: 10px; }
.obs dl { margin: 0; font-family: var(--font-body); font-size: 15px; }
.obs dt { font-weight: 600; margin-top: 10px; }
.obs dd { margin: 2px 0 0; color: var(--ink-2); }
.pull { border-top: 1px solid var(--hairline-strong); border-bottom: 1px solid var(--hairline-strong); padding: 22px 0; margin: 36px 0; font-size: 24px; line-height: 1.35; color: var(--ink-1); }

.faq h2 { margin-top: 0; }
.faq details { border-bottom: 1px solid var(--hairline-strong); padding: 6px 0; }
.faq summary { font-family: var(--font-display); font-weight: 500; font-size: 20px; cursor: pointer; list-style: none; position: relative; padding: 12px 36px 12px 0; min-height: var(--tap); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 8px; font-family: var(--font-mono); font-size: 24px; color: var(--accent); }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--ink-2); font-size: 18px; margin: 4px 0 14px; }

.cta { background: #161210; color: #f3ecdf; padding: 36px; border-radius: 16px; margin: 52px 0 0; text-align: left; }
.cta h3 { color: #f3ecdf; margin: 0 0 10px; font-size: 26px; }
.cta p { color: #d9ccb7; margin: 0 0 22px; }
.cta .bk-btn { background: #f3ecdf; color: #161210; border-color: #f3ecdf; }
.cta .bk-btn:hover { background: #e06a38; border-color: #e06a38; color: #161210; }
.cta .small { font-family: var(--font-body); font-size: 14px; margin: 14px 0 0; color: #b9ab94; }

/* blog index */
.post-list { list-style: none; margin: 0; padding: 0; }
.post-item { border-top: 1px solid var(--hairline-strong); padding: 28px 0; margin: 0; }
.post-item:last-child { border-bottom: 1px solid var(--hairline-strong); }
.post-title { font-size: 26px; line-height: 1.2; margin: 0 0 10px; font-weight: 500; }
.post-title a { color: var(--ink-1); text-decoration: none; }
.post-title a:hover { color: var(--accent); text-decoration: underline; }
.post-excerpt { color: var(--ink-2); font-size: 18px; margin: 0 0 12px; }
.post-meta { font-family: var(--font-body); font-size: 14px; color: var(--ink-2); }
.read-more { display: inline-flex; align-items: center; min-height: var(--tap); font-family: var(--font-body); font-size: 15px; font-weight: 600; }

/* ---------------- legal documents ---------------- */
.legal main { max-width: 820px; font-family: var(--font-body); font-size: 17px; }
.legal-nav { margin: 0 0 28px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.legal-nav a {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 6px 14px; border: 1px solid var(--control-border);
  border-radius: 999px; font-size: 15px; color: var(--ink-1); text-decoration: none;
}
.legal-nav a:hover { border-color: var(--ink-1); }
.legal-nav a[aria-current="page"] { background: var(--ink-1); color: var(--ink-inv); border-color: var(--ink-1); }
.doc-meta { font-size: 13px; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 12px; font-weight: 500; }
.legal h1 { font-size: clamp(32px, 6vw, 44px); }
.lead { font-size: 19px; color: var(--ink-2); margin: 0 0 22px; max-width: 64ch; }
.updated { display: inline-block; font-size: 14px; color: var(--ink-2); border: 1px solid var(--hairline-strong); border-radius: 999px; padding: 4px 14px; margin-bottom: 28px; }
.legal .revision { font-size: 14px; line-height: 1.55; color: var(--ink-2); margin: -12px 0 28px; max-width: 70ch; }
.legal h2 { font-size: 26px; margin: 44px 0 12px; scroll-margin-top: calc(var(--header-height) + 16px); }
.legal h3 { font-family: var(--font-body); font-size: 17px; font-weight: 600; margin: 26px 0 8px; }
.legal p, .legal li { color: var(--ink-2); }
.legal p { margin: 10px 0; }
.legal li { margin: 4px 0; }
.legal strong { color: var(--ink-1); }
.toc { background: #fff; border: 1px solid var(--hairline-strong); border-radius: 10px; padding: 20px 24px; margin: 8px 0 40px; }
.toc h2 { margin: 0 0 8px; font-family: var(--font-body); font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-2); font-weight: 600; }
.toc ol { margin: 0; padding-left: 22px; columns: 2; column-gap: 28px; }
.toc li { color: var(--ink-1); font-size: 15px; break-inside: avoid; }
.toc a { color: var(--ink-1); display: inline-block; padding: 3px 0; }
@media (max-width: 640px) { .toc ol { columns: 1; } }
.callout { background: var(--accent-soft); border-left: 3px solid var(--accent); border-radius: 6px; padding: 14px 18px; margin: 16px 0; font-size: 16px; }
.callout strong { color: var(--accent-press); }
.table-wrap { overflow-x: auto; margin: 16px 0; border: 1px solid var(--hairline-strong); border-radius: 6px; -webkit-overflow-scrolling: touch; }
.table-wrap:focus-visible { outline-offset: 0; }
.table-wrap table { margin: 0; min-width: 560px; }
table { width: 100%; border-collapse: collapse; font-size: 15px; background: #fff; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--hairline); vertical-align: top; color: var(--ink-2); }
th { font-weight: 600; color: var(--ink-1); background: var(--bg-sunken); border-bottom: 1px solid var(--hairline-strong); }
.legal .ph { background: #fff3cd; color: #5c4400; border: 1px dashed #8a6a00; border-radius: 4px; padding: 0 4px; font-weight: 600; overflow-wrap: anywhere; }
.legal .review-banner {
  margin: 0 0 24px; padding: 14px 18px; border: 1px solid #8a6a00; background: #fff3cd; color: #4a3800;
  border-radius: 8px; font-size: 15px; line-height: 1.5;
}
.legal hr { margin: 44px 0; }
.legal-foot-note { margin-top: 48px; font-size: 14px; color: var(--ink-2); }

@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  .bk-header, .bk-footer, .skip-link, .legal-nav, .no-print { display: none !important; }
  main { padding: 0; max-width: 100%; }
  h1 { font-size: 22pt; } h2 { font-size: 14pt; }
  a { color: #000; text-decoration: none; }
  .toc, .callout { background: #fff; border: 1px solid #ccc; }
  .table-wrap { overflow: visible; border: 0; }
  .table-wrap table { min-width: 0; }
}

/* links inside legal copy need >= 4.5:1 on white, soft and callout backgrounds */
.legal main a:not(.legal-nav a) { color: var(--accent-press); }
.legal .callout a { color: var(--accent-press); }