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: 40px 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    p { margin: 0 0 8px 0; }
54    ul { margin: 0 0 16px 0; padding-left: 24px; }
55    li { margin-bottom: 4px; }
56    .intro { margin-bottom: 16px; }
57    .site-footer {
58      max-width: 600px;
59      margin: 0 auto;
60      padding: 20px;
61      width: 100%;
62      display: flex;
63      justify-content: space-between;
64      align-items: center;
65    }
66    .site-footer a {
67      color: #666;
68      text-decoration: none;
69      font-size: 12px;
70    }
71    .site-footer a:hover {
72      color: #000;
73      text-decoration: underline;
74    }
75  </style>
76</head>
77<body>
78  <main>
79    {% block content %}{% endblock %}
80  </main>
81  <footer class="site-footer">
82    <a href="mailto:contact@systemoperator.com">contact</a>
83  </footer>
84</body>
85</html>