/* jackspr4t studios: the look shared by every page but the home page, which carries its
   own copy of these tokens. Cream paper, ink, a pixel face for headings, and nothing loaded
   from anywhere else. */
@font-face{font-family:"DotGothic16";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/dotgothic16-latin.woff2) format("woff2")}
:root{
  --paper:#F2EAD7;--paper2:#E9DEC4;--ink:#1D1B16;--dim:#5E574A;--faint:#8E8573;--green:#2E7D4F;
  --pixel:"DotGothic16",ui-monospace,monospace;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 var(--sans);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.11 0 0 0 0 0.10 0 0 0 0 0.08 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection{background:var(--ink);color:var(--paper)}
a{color:var(--ink)}
a:focus-visible,button:focus-visible{outline:2px solid var(--green);outline-offset:4px}
[hidden]{display:none!important}

/* The strip back to the studio, on every page. */
.top{max-width:680px;margin:0 auto;padding:20px 16px 0}
.home{display:inline-flex;align-items:center;gap:10px;font:14px/1 var(--pixel);text-decoration:none;color:var(--ink)}
.home img{width:28px;height:28px}

main.doc{max-width:680px;margin:0 auto;padding:28px 16px 64px}
.doc h1{font:400 clamp(28px,7vw,36px)/1.1 var(--pixel);margin:0 0 6px}
.doc h2{font:400 20px/1.2 var(--pixel);margin:34px 0 8px}
.doc p,.doc li{color:var(--dim)}
.doc strong{color:var(--ink)}
.doc ul{padding-left:20px}
.doc li{margin:6px 0}
.eff{font:13px/1.5 var(--mono);color:var(--faint);margin:0 0 26px}

/* A boxed note: the short version, or a way to get in touch. */
.box{border:2px solid var(--ink);background:var(--paper2);box-shadow:4px 4px 0 var(--ink);padding:16px 18px;margin:0 0 30px}
.box p{margin:0;color:var(--ink)}
.doc h1 + .box{margin-top:22px}

/* Buttons with a hard shadow, pressed in when tapped. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border:2px solid var(--ink);background:var(--ink);color:var(--paper);box-shadow:4px 4px 0 var(--green);font:15px/1.2 var(--mono);text-decoration:none;cursor:pointer;transition:transform .08s steps(2),box-shadow .08s steps(2)}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--green)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--green)}
.btn.quiet{background:var(--paper);color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.btn.quiet:hover{box-shadow:6px 6px 0 var(--ink)}
.btn.quiet:active{box-shadow:1px 1px 0 var(--ink)}

/* An app icon on its own flat tile, so a rendered icon sits happily among pixels. */
.tile{display:inline-grid;place-items:center;flex:none;padding:10px;border:2px solid var(--ink);background:var(--paper2);box-shadow:4px 4px 0 var(--ink)}
.tile img{display:block;width:100%;height:100%;border-radius:22.5%}

footer.site{max-width:680px;margin:0 auto;padding:18px 16px calc(40px + env(safe-area-inset-bottom));border-top:2px solid var(--ink);font:12px/1.9 var(--mono);color:var(--faint)}
footer.site a{color:var(--dim)}

/* The screenshot viewer (viewer.js): the picture large on a dark backdrop, pixel buttons. */
html.viewing{overflow:hidden}
.viewer{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;gap:14px;padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));background:rgba(29,27,22,.9);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);animation:v-in .18s ease-out}
.viewer[hidden]{display:none}
@keyframes v-in{from{opacity:0}}
.v-fig{margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;max-height:100%;min-width:0}
.v-fig img{display:block;max-width:min(88vw,460px);max-height:calc(100svh - 120px);width:auto;height:auto;border:2px solid var(--paper);box-shadow:5px 5px 0 #000}
.v-fig figcaption{display:flex;align-items:center;gap:16px;font:12px/1 var(--mono);letter-spacing:.1em;color:var(--paper)}
.v-dl{color:var(--paper)}
.v-btn{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:2px solid var(--paper);background:var(--ink);color:var(--paper);box-shadow:3px 3px 0 #000;font:16px/1 var(--mono);cursor:pointer;-webkit-tap-highlight-color:transparent}
.v-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #000}
.v-close{position:absolute;top:calc(14px + env(safe-area-inset-top));right:14px}
/* On a phone the arrows sit along the bottom, either side, clear of the picture. */
@media (max-width:640px){
  .v-prev,.v-next{position:absolute;bottom:calc(14px + env(safe-area-inset-bottom))}
  .v-prev{left:16px}
  .v-next{right:16px}
  .v-fig img{max-height:calc(100svh - 150px)}
  .v-fig{margin-bottom:40px}
}
@media (prefers-reduced-motion:reduce){ .viewer{animation:none} }