/* Fretwork site: one reading column. Palette matches the app's lake, sea and brass tokens. */
:root{
  --bg:#edf0eb; --surface:#f8faf6; --line:#cfd6cd; --ink:#161b21; --ink2:#55606b;
  --lake:#27659a; --brass:#86620f;
  --display:"Bricolage Grotesque","Avenir Next","Segoe UI",sans-serif;
  --body:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark){ :root{
  --bg:#0f1318; --surface:#171d24; --line:#2b343f; --ink:#e9ede8; --ink2:#9aa6b2;
  --lake:#63a8e2; --brass:#e0b85e; color-scheme:dark } }
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--body)}
.wrap{max-width:720px;margin:0 auto;padding:28px 20px 72px}
header.site{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:baseline;padding-bottom:16px;border-bottom:1px solid var(--line);margin-bottom:36px}
header.site .name{font:700 1.25rem var(--display);color:var(--ink);text-decoration:none;margin-right:auto}
header.site nav{display:flex;gap:18px;font-size:.95rem}
a{color:var(--lake);text-underline-offset:3px}
h1,h2{font-family:var(--display);line-height:1.15;text-wrap:balance}
h1{font-size:2.2rem;font-weight:700;margin:0 0 8px}
h2{font-size:1.3rem;font-weight:700;margin:40px 0 8px}
h3{font-size:1.02rem;margin:22px 0 4px}
p,ul,table{margin:0 0 14px}
ul{padding-left:22px}
li{margin-bottom:6px}
.meta{color:var(--ink2);font-size:.93rem;margin-bottom:28px}
.lede{font-size:1.12rem;color:var(--ink2);max-width:60ch}
.summary{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--brass);border-radius:6px;padding:16px 18px;margin:0 0 8px}
.summary p:last-child,.summary ul:last-child{margin-bottom:0}
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{text-align:left;vertical-align:top;padding:9px 12px 9px 0;border-bottom:1px solid var(--line)}
th{font-weight:600;color:var(--ink2)}
footer.site{margin-top:56px;padding-top:16px;border-top:1px solid var(--line);color:var(--ink2);font-size:.9rem;display:flex;flex-wrap:wrap;gap:6px 18px}
:focus-visible{outline:2px solid var(--lake);outline-offset:2px}