/* Shared content-page styles. Bricolage Grotesque is licensed under the SIL OFL. */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(fonts/BricolageGrotesque-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(fonts/BricolageGrotesque-latin-ext.woff2) format('woff2');
}
:root {
  --text: #1a1a1a; --muted: #666; --border: #ddd; --bg: #fff;
  --card: #f7f7f7; --accent: #0b7285; --pro-bg: #e7f5ff;
  --pro-text: #1971c2; --std-bg: #e6fcf5; --std-text: #087f5b;
  --exp-bg: #fff3bf; --exp-text: #8a5d00;
}
@media (prefers-color-scheme: dark) {
  :root {
    --text: #e6e6e6; --muted: #aaa; --border: #3a3a3a; --bg: #121212;
    --card: #1e1e1e; --accent: #66d9e8; --pro-bg: #123; --pro-text: #74c0fc;
    --std-bg: #0b3d32; --std-text: #63e6be; --exp-bg: #3d3100; --exp-text: #ffe066;
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  max-width: 920px; margin: 40px auto; padding: 0 20px; line-height: 1.6;
  font-family: -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--text); background: var(--bg);
}
body.guide { max-width: 760px; }
h1, h2, h3, .toc strong {
  font-family: 'Bricolage Grotesque', -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}
h1 { font-size: 1.9rem; font-weight: 800; margin-bottom: .2rem; }
h2 { font-size: 1.28rem; margin-top: 2.7rem; padding-top: 1rem; border-top: 1px solid var(--border); }
h3 { font-size: 1.05rem; margin: 1.7rem 0 .35rem; }
h3 + p { margin-top: 0; }
a { color: var(--accent); }
.updated, .crumb, .muted { color: var(--muted); font-size: .9rem; }
.crumb { margin-bottom: 2rem; }
.lead { font-size: 1.05rem; }
.toc { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 16px 20px; margin: 2rem 0; }
.toc ul { columns: 2; margin-bottom: 0; }
table { width: 100%; border-collapse: collapse; margin: 1rem 0 2rem; font-size: .94rem; }
th, td { border: 1px solid var(--border); padding: 9px 11px; text-align: left; vertical-align: top; }
th { background: var(--card); }
th:last-child, td.ed { width: 108px; text-align: center; white-space: nowrap; }
.std, .pro, .exp { display: inline-block; border-radius: 99px; padding: 1px 8px; font-size: .72rem; font-weight: 700; }
.std { background: var(--std-bg); color: var(--std-text); }
.pro { background: var(--pro-bg); color: var(--pro-text); }
.exp { background: var(--exp-bg); color: var(--exp-text); }
.shot { display: block; max-width: 330px; width: 100%; margin: 16px auto; border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 2px 12px rgba(0,0,0,.1); }
.shot.wide { max-width: 680px; }
.tip { background: var(--card); border-left: 4px solid var(--accent); padding: 12px 16px; margin: 1rem 0; }
code { background: var(--card); padding: 1px 5px; border-radius: 4px; }
footer { margin-top: 4rem; padding-top: 1rem; border-top: 1px solid var(--border); color: var(--muted); font-size: .9rem; }
footer nav a { margin-right: 18px; }
@media (max-width: 640px) {
  body { margin-top: 24px; }
  .toc ul { columns: 1; }
  table { display: block; overflow-x: auto; }
  th:last-child, td.ed { width: 92px; }
}