1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="utf-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1">
6  <title>{{ config.title }}</title>
7  <meta name="description" content="{{ config.description }}">
8  <style>
9    @font-face {
10      font-family: 'Berkeley Mono';
11      src: url('/fonts/BerkeleyMono-Regular.woff2') format('woff2');
12      font-weight: 400;
13      font-style: normal;
14      font-display: swap;
15    }
16    * { margin: 0; padding: 0; box-sizing: border-box; }
17    body {
18      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
19      font-size: 13px;
20      line-height: 1.5;
21      color: #000;
22      min-height: 100vh;
23      display: flex;
24      flex-direction: column;
25      margin: 0;
26      padding: 0;
27    }
28    main {
29      max-width: 600px;
30      margin: 0 auto;
31      padding: 24px 20px 0;
32      flex: 1;
33      width: 100%;
34    }
35    a { color: #007AFF; text-decoration: none; }
36    a:hover { text-decoration: underline; }
37    h1 {
38      font-family: 'Berkeley Mono', 'SF Mono', 'Menlo', monospace;
39      font-size: 16px;
40      font-weight: 400;
41      letter-spacing: 2px;
42      margin-bottom: 20px;
43    }
44    h1 a { color: #0066fe; }
45    h2 {
46      font-size: 1.25rem;
47      font-weight: 600;
48      line-height: 1.25;
49      color: #000;
50      margin: 1.25rem 0 0.75rem 0;
51    }
52    h2 a { color: #007AFF; }
53    h3 {
54      font-size: 1.125rem;
55      font-weight: 600;
56      margin: 1rem 0 0.5rem 0;
57    }
58    p { margin: 0 0 8px 0; }
59    ul { margin: 0 0 16px 0; padding-left: 24px; }
60    li { margin-bottom: 4px; }
61    .intro { margin-bottom: 16px; }
62    .site-footer {
63      max-width: 600px;
64      margin: 0 auto;
65      padding: 20px;
66      width: 100%;
67      display: flex;
68      justify-content: space-between;
69      align-items: center;
70    }
71    .site-footer a {
72      color: #666;
73      text-decoration: none;
74      font-size: 12px;
75    }
76    .site-footer a:hover {
77      color: #000;
78      text-decoration: underline;
79    }
80  </style>
81</head>
82<body>
83  <main>
84    {% block content %}{% endblock %}
85  </main>
86  <footer class="site-footer">
87    <a href="mailto:contact@systemoperator.com">contact</a>
88  </footer>
89</body>
90</html>