/* sigil.bond — shared tokens and prose styling.
   Dark-first, a green ramp across surfaces rather than one accent on black. */

:root {
  --ink:#0b0f11; --panel:#121819; --raised:#1a2325; --line:#232e30; --line-hi:#33413f;
  --g-wash:#0e2b23; --g-deep:#1d7a5e; --g-mid:#35b88a; --g-bright:#6fe3b8;
  --amber:#e0a458; --red:#e0705c;
  --text:#e8edeb; --text-2:#93a5a0; --text-3:#647471;
  --accent:var(--g-mid); --accent-ink:#04120d;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ink:#f4f6f5; --panel:#fff; --raised:#eef2f1; --line:#dde4e2; --line-hi:#c2cecb;
    --g-wash:#dcf0e8; --g-deep:#12604a; --g-mid:#17795e; --g-bright:#0f5744;
    --amber:#8a5d18; --red:#a63b28;
    --text:#0d1614; --text-2:#4a5a56; --text-3:#72817d;
    --accent:var(--g-mid); --accent-ink:#fff;
  }
}
:root[data-theme="light"] {
  --ink:#f4f6f5; --panel:#fff; --raised:#eef2f1; --line:#dde4e2; --line-hi:#c2cecb;
  --g-wash:#dcf0e8; --g-deep:#12604a; --g-mid:#17795e; --g-bright:#0f5744;
  --amber:#8a5d18; --red:#a63b28;
  --text:#0d1614; --text-2:#4a5a56; --text-3:#72817d;
  --accent:var(--g-mid); --accent-ink:#fff;
}

* { box-sizing: border-box; }
body {
  margin:0; background:var(--ink); color:var(--text);
  font-family:Archivo,"Helvetica Neue",Arial,sans-serif;
  /* rem, not px, so the page respects a reader's browser font size. */
  font-size:0.97rem; line-height:1.68; -webkit-font-smoothing:antialiased;
}
code, pre, .mono { font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
:focus-visible { outline:2px solid var(--g-mid); outline-offset:2px; }

.wrap { max-width:1040px; margin:0 auto; padding:0 1.5rem; }
.eyebrow {
  font-family:"IBM Plex Mono",monospace; font-size:10px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text-3);
}

/* masthead */
header { border-bottom:1px solid var(--line); background:var(--panel); position:sticky; top:0; z-index:20; }
header .wrap { display:flex; align-items:center; gap:1.5rem; padding-top:.8rem; padding-bottom:.8rem; }
.wordmark { font-size:1.1rem; font-weight:700; letter-spacing:-.03em; display:flex; align-items:center; gap:.45rem; color:var(--text); }
.wordmark:hover { text-decoration:none; }
.mark { width:15px; height:15px; flex:none; }
nav { margin-left:auto; display:flex; gap:1.4rem; font-size:13.5px; align-items:center; }
nav a { color:var(--text-2); }
nav a:hover { color:var(--text); text-decoration:none; }
nav a.cta { color:var(--accent-ink); background:var(--g-mid); padding:.35rem .8rem; border-radius:3px; font-weight:600; font-size:13px; }

/* docs layout */
/* 🔴 padding-top/bottom, NEVER the `padding` shorthand. `.layout` sits on the
   same element as `.wrap` (`class="wrap layout"`), and a shorthand here replaces
   .wrap's `padding: 0 1.5rem` outright — the copy then runs into the edge of the
   screen on anything narrow. Same bug shape as the footer's stale flex rule. */
.layout { display:grid; grid-template-columns:216px minmax(0,1fr); gap:3rem; align-items:start;
          padding-top:2.5rem; padding-bottom:4rem; }
@media (max-width:880px){ .layout { grid-template-columns:1fr; gap:1.5rem; } .toc { position:static !important; } }
.toc { position:sticky; top:70px; font-size:13.5px; }
.toc div { margin-bottom:.15rem; }
.toc a { color:var(--text-2); display:block; padding:.15rem 0; }
.toc .sub { padding-left:.8rem; font-size:13px; }
.toc strong { display:block; font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.14em;
              text-transform:uppercase; color:var(--text-3); margin:1.2rem 0 .4rem; font-weight:500; }
.toc strong:first-child { margin-top:0; }

h1 { font-size:clamp(1.75rem, 4.4vw, 2.2rem); font-weight:700; letter-spacing:-.035em; margin:0 0 .6rem; line-height:1.08; }
h2 { font-size:clamp(1.22rem, 2.9vw, 1.4rem); font-weight:700; letter-spacing:-.025em; margin:2.6rem 0 .7rem; scroll-margin-top:74px; }
h3 { font-size:1.02rem; font-weight:600; margin:1.6rem 0 .4rem; scroll-margin-top:74px; }
p, li { color:var(--text-2); max-width:70ch; }
strong { color:var(--text); font-weight:600; }
.lede { font-size:1.06rem; margin-bottom:2rem; }
ul, ol { padding-left:1.15rem; }
li { margin-bottom:.3rem; }
hr { border:0; border-top:1px solid var(--line); margin:2.6rem 0; }

pre {
  background:var(--panel); border:1px solid var(--line); color:var(--text-2);
  font-size:12.5px; line-height:1.72; padding:.85rem .95rem; border-radius:4px;
  overflow-x:auto; margin:.9rem 0;
}
pre b { color:var(--g-bright); font-weight:400; }
pre i { color:var(--text-3); font-style:normal; }
code { font-size:.9em; background:var(--raised); border:1px solid var(--line); padding:.05em .32em; border-radius:2px; color:var(--text); }
pre code { background:none; border:0; padding:0; }

table { width:100%; border-collapse:collapse; font-size:13.5px; margin:1rem 0; display:block; overflow-x:auto; }
th { text-align:left; font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.1em;
     text-transform:uppercase; color:var(--text-3); font-weight:500; padding:0 1rem .5rem 0; white-space:nowrap; }
td { padding:.55rem 1rem .55rem 0; border-top:1px solid var(--line); color:var(--text-2); vertical-align:top; }
td:first-child { color:var(--text); }
td code { white-space:nowrap; }

.note {
  border-left:2px solid var(--g-deep); background:var(--panel);
  padding:.8rem 1rem; margin:1.2rem 0; border-radius:0 4px 4px 0; font-size:14px;
}
.note.warn { border-left-color:var(--amber); }
.note p:last-child { margin-bottom:0; }
.note p:first-child { margin-top:0; }
.note b { color:var(--text); }

footer { border-top:1px solid var(--line); background:var(--panel); padding:2.4rem 0; font-size:13px; color:var(--text-3); }
footer .cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1.6rem; }
footer h4 { font-family:"IBM Plex Mono",monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase;
            color:var(--text-3); margin:0 0 .5rem; font-weight:500; }
footer a { color:var(--text-2); display:block; padding:.12rem 0; }
footer .fine { margin-top:1.8rem; padding-top:1.4rem; border-top:1px solid var(--line); max-width:78ch; line-height:1.6; }

/* ── the mark, used sparingly as structure ──────────────────────────────────
   A section marker only earns its place if it encodes something. Here it marks
   where a top-level section begins, which is real structure — it is not an
   emoji dropped in front of every heading. h3 gets nothing. */
h2 { position:relative; padding-left:1.5rem; }
h2::before {
  content:""; position:absolute; left:0; top:.34em;
  width:.62em; height:.8em;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2084%20108%22%3E%3Cpath%20fill%3D%22%252335b88a%22%20fill-rule%3D%22evenodd%22%20d%3D%22M42%200%2084%2054%2042%20108%200%2054Z%20M15.4%2044.4%2068.5%2044.4%2068.5%2053.5%2015.4%2053.5Z%20M27.6%2063.9%2056.2%2063.9%2056.2%2071.3%2027.6%2071.3Z%22%2F%3E%3C%2Fsvg%3E");
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) h2::before { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2084%20108%22%3E%3Cpath%20fill%3D%22%252317795e%22%20fill-rule%3D%22evenodd%22%20d%3D%22M42%200%2084%2054%2042%20108%200%2054Z%20M15.4%2044.4%2068.5%2044.4%2068.5%2053.5%2015.4%2053.5Z%20M27.6%2063.9%2056.2%2063.9%2056.2%2071.3%2027.6%2071.3Z%22%2F%3E%3C%2Fsvg%3E"); }
}
:root[data-theme="light"] h2::before { background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2084%20108%22%3E%3Cpath%20fill%3D%22%252317795e%22%20fill-rule%3D%22evenodd%22%20d%3D%22M42%200%2084%2054%2042%20108%200%2054Z%20M15.4%2044.4%2068.5%2044.4%2068.5%2053.5%2015.4%2053.5Z%20M27.6%2063.9%2056.2%2063.9%2056.2%2071.3%2027.6%2071.3Z%22%2F%3E%3C%2Fsvg%3E"); }

/* A rule between major sections gets the mark set into it rather than a bare line. */
hr {
  border:0; height:14px; margin:3rem 0;
  background:no-repeat center/auto 14px url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2084%20108%22%3E%3Cpath%20fill%3D%22%2523232e30%22%20fill-rule%3D%22evenodd%22%20d%3D%22M42%200%2084%2054%2042%20108%200%2054Z%20M15.4%2044.4%2068.5%2044.4%2068.5%2053.5%2015.4%2053.5Z%20M27.6%2063.9%2056.2%2063.9%2056.2%2071.3%2027.6%2071.3Z%22%2F%3E%3C%2Fsvg%3E"),
             linear-gradient(var(--line),var(--line)) center/100% 1px no-repeat;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) hr {
    background:no-repeat center/auto 14px url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2084%20108%22%3E%3Cpath%20fill%3D%22%2523dde4e2%22%20fill-rule%3D%22evenodd%22%20d%3D%22M42%200%2084%2054%2042%20108%200%2054Z%20M15.4%2044.4%2068.5%2044.4%2068.5%2053.5%2015.4%2053.5Z%20M27.6%2063.9%2056.2%2063.9%2056.2%2071.3%2027.6%2071.3Z%22%2F%3E%3C%2Fsvg%3E"),
               linear-gradient(var(--line),var(--line)) center/100% 1px no-repeat;
  }
}

/* The masthead mark sits on the baseline of the wordmark. */
.wordmark .mark { width:.82em; height:1.05em; color:var(--g-mid); }