@font-face { font-family: "Mestika"; src: url("../fonts/Mestika-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Mestika"; src: url("../fonts/Mestika-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Mestika"; src: url("../fonts/Mestika-Black.woff2") format("woff2"); font-weight: 900; font-display: swap; }
/* Shareable article page: same 1-bit window look as the computer, but a normal scrolling page so search engines and readers get plain text. */
:root { --black: #0a0b0e; --fg: #e9e7e0; --soft: #b9b7b0; --primary: #2448e0; color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--black); color: var(--fg); font: 400 18px/1.9 "Mestika", Tahoma, sans-serif; padding: 24px 16px 64px; }
.window { max-width: 44rem; margin: 0 auto; border: 1px solid var(--fg); box-shadow: 3px 3px 0 var(--fg); }
.tbar { height: 2rem; border-bottom: 1px solid var(--fg); display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; padding: .45rem .6rem; background: repeating-linear-gradient(180deg, var(--fg) 0 1px, transparent 1px 3px) content-box; }
.tbar a { width: 1.1rem; height: 1.1rem; border: 1px solid var(--fg); background: var(--black); box-shadow: 0 0 0 3px var(--black); display: block; }
.tbar b { justify-self: center; background: var(--black); padding: 0 .8rem; box-shadow: 0 0 0 .45rem var(--black); font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 80%; }
article { padding: 1.5rem clamp(1rem, 4vw, 2.5rem) 2rem; }
.meta { color: var(--soft); margin: 0; }
h1 { font: 900 clamp(1.6rem, 5vw, 2.2rem)/1.3 "Mestika", Tahoma, sans-serif; margin: .2rem 0 1rem; }
h2 { font-size: 1.25rem; margin: 2rem 0 .4rem; }
p, li { max-width: 40rem; }
li::marker { content: "◆  "; font-size: .7em; }
.foot { border-top: 1px solid var(--fg); padding: .8rem 1rem; display: flex; flex-wrap: wrap; gap: .6rem; justify-content: space-between; }
.btn { border: 1px solid var(--fg); border-radius: .7rem; padding: .2rem 1rem; text-decoration: none; color: var(--fg); font-weight: 700; }
.btn.default { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn:hover { background: var(--fg); color: var(--black); }