/* The plain site, in the desktop's clothes. Generated by tools/build-site.py. */
@font-face { font-family: "Chicago"; src: url("desktop/fonts/ChicagoKare-Regular.woff2") format("woff2"), url("desktop/fonts/ChicagoKare-Regular.ttf") format("truetype"); }
@font-face { font-family: "ChicagoSupp"; src: url("desktop/fonts/ChicagoSupp.ttf") format("truetype"); }
@font-face { font-family: "Geneva12"; src: url("desktop/fonts/Kurrajong12.ttf") format("truetype"); }
@font-face { font-family: "Geneva9"; src: url("desktop/fonts/Kurrajong9.ttf") format("truetype"); }
@font-face { font-family: "Geneva14"; src: url("desktop/fonts/Kurrajong14.ttf") format("truetype"); }
@font-face { font-family: "Monaco12"; src: url("desktop/fonts/Banksia12.ttf") format("truetype"); }

/* Every face is drawn 1:1 at 16px; the whole page is then zoomed by a whole number, so each
   font pixel and picture pixel stays a sharp square (nearest neighbour, no smoothing). */
:root {
  --ink: #000; --paper: #fff; --butter: #fff37b; --ice: #b7f3ff;
  --chicago: 16px/16px "Chicago", "ChicagoSupp", monospace;
  --geneva: 16px/16px "Geneva12", "ChicagoSupp", sans-serif;
  --geneva9: 16px/12px "Geneva9", "ChicagoSupp", sans-serif;
}
html { font-synthesis: none; -webkit-font-smoothing: none; -moz-osx-font-smoothing: unset; font-smooth: never; image-rendering: pixelated; }
@media (min-width: 1100px) and (min-height: 640px) { html { zoom: 2; } }
@media (min-width: 1700px) and (min-height: 980px) { html { zoom: 3; } }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: #933f03 url("desktop-pattern.png"); color: var(--ink); font: var(--geneva); }
b, strong, h1, h2, h3, h4, h5 { font-weight: normal; }
a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
a:hover, a:focus-visible { background: var(--ink); color: var(--paper); outline: none; text-decoration: none; }
::selection { background: var(--butter); color: var(--ink); }

/* the menu bar: the site's navigation */
.menubar { display: flex; align-items: stretch; gap: 0; height: 20px; padding: 0 8px; background: var(--paper); border-bottom: 1px solid var(--ink); font: var(--chicago); }
.menubar a { display: block; padding: 2px 10px 0; text-decoration: none; white-space: nowrap; }
.menubar .site { padding-left: 4px; }
.menubar nav { flex: 1; min-width: 0; overflow: hidden; }
.menubar ul { display: flex; margin: 0; padding: 0; list-style: none; }
.menubar a[aria-current] { background: var(--ink); color: var(--paper); }

/* the document window holding the page */
.window { max-width: 512px; margin: 16px auto 0; background: var(--paper); border: 1px solid var(--ink); box-shadow: 1px 1px 0 var(--ink); }
.titlebar { position: relative; height: 19px; margin: 0; padding: 1px 0 0; border-bottom: 1px solid var(--ink); text-align: center; font: var(--chicago); }
.titlebar::before { content: ""; position: absolute; left: 1px; right: 1px; top: 3px; height: 11px; background: repeating-linear-gradient(to bottom, var(--ink) 0 1px, transparent 1px 2px); }
.titlebar span { position: relative; display: inline-block; max-width: calc(100% - 24px); height: 16px; padding: 0 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: var(--paper); vertical-align: top; }
.page { padding: 12px 16px 16px; }

/* the writing */
.page h2 { font: var(--chicago); margin: 16px 0 6px; }
.page h2:first-child, .page article > :first-child { margin-top: 0; }
.page h3 { font: var(--chicago); margin: 14px 0 6px; }
.page h4 { font: 16px/18px "Geneva14", "ChicagoSupp", sans-serif; margin: 12px 0 4px; }
.page h5 { font: var(--geneva); text-shadow: 1px 0 0 currentColor; margin: 10px 0 4px; }
.page b, .page strong { text-shadow: 1px 0 0 currentColor; }
.page p, .page ul, .page ol, .page pre, .page blockquote { margin: 0 0 10px; }
.page ul, .page ol { padding-left: 18px; }
.page code, .page pre { font: 16px/14px "Monaco12", "ChicagoSupp", monospace; }
.page pre { padding: 4px 6px; border: 1px solid var(--ink); white-space: pre-wrap; }
.page blockquote { padding-left: 10px; border-left: 2px solid var(--ink); }
.page hr { border: 0; height: 1px; margin: 12px 0; background: var(--ink); }
.page img { display: block; max-width: 100%; height: auto; margin: 0 0 10px; }
.lead { margin-top: 0; }
.date, .more, .draft { font: var(--geneva9); }
.date { margin: -4px 0 12px; }
.draft { display: inline-block; padding: 1px 4px; border: 1px solid var(--ink); background: var(--butter); }
.page .entries { list-style: none; padding: 0; }
.entries li { margin: 0 0 4px; }
.entries time { display: inline-block; min-width: 120px; font: var(--geneva9); }

/* the way to the desktop: a dialog-like card with a default button */
.desktop-card { margin: 18px 0 0; padding: 10px 12px; border: 1px solid var(--ink); background: var(--ice); }
.desktop-card h2 { margin-top: 0; }
.desktop-card p:last-child { margin: 0; }
.button { display: inline-block; height: 20px; padding: 1px 14px 0; border: 1px solid var(--ink); border-radius: 4px; background: var(--paper); font: var(--chicago); text-decoration: none;
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--ink); margin: 3px; }
.button:hover, .button:focus-visible { background: var(--ink); color: var(--paper); }

footer { max-width: 512px; margin: 12px auto 24px; padding: 2px 6px; background: var(--paper); border: 1px solid var(--ink); font: var(--geneva9); }
footer p { margin: 0; }

@media (max-width: 560px) { .window { margin: 8px 8px 0; } footer { margin: 8px; } .menubar { padding: 0 2px; } .menubar a { padding: 2px 6px 0; } }