/* HandWare 68k launch page. Chicago, Geneva, Monaco and New York are outline
   fonts traced from the System 7.1 bitmap suitcases HandWare typesets with.
   Sizes are exact pixel multiples (Chicago 12 -> 24 / 36 / 48 / 60) so every
   glyph edge lands on a device pixel. */

@font-face{font-family:"HW Chicago";src:url(fonts/chicago-12.woff) format("woff"),url(fonts/chicago-12.ttf) format("truetype");font-display:block}
@font-face{font-family:"HW Geneva 9";src:url(fonts/geneva-9.woff) format("woff"),url(fonts/geneva-9.ttf) format("truetype");font-display:block}
@font-face{font-family:"HW Geneva 12";src:url(fonts/geneva-12.woff) format("woff"),url(fonts/geneva-12.ttf) format("truetype");font-display:block}
@font-face{font-family:"HW Monaco";src:url(fonts/monaco-9.woff) format("woff"),url(fonts/monaco-9.ttf) format("truetype");font-display:block}
@font-face{font-family:"HW New York";src:url(fonts/newyork-24.woff) format("woff"),url(fonts/newyork-24.ttf) format("truetype");font-display:block}

:root{
  --paper:#F3EDE0; --paper-2:#E7DFCB; --ink:#151515; --ink-2:#55503f; --white:#FFFFFF; --shadow:#151515;
  --blue:#1B5FD0; --yellow:#F8C53A; --orange:#F26A1B; --purple:#6C3AA5; --green:#57B266; --red:#DF3A2F;
  --chicago:"HW Chicago","Chicago","Charcoal",monospace;
  --geneva:"HW Geneva 9","Geneva","Verdana",sans-serif;
  --geneva12:"HW Geneva 12","Geneva","Verdana",sans-serif;
  --mono:"HW Monaco","Monaco","Menlo",monospace;
  --serif:"EB Garamond","Apple Garamond","Garamond","Georgia",serif;
  --ny:"HW New York","Times New Roman",serif;
  --wrap:1180px; --pad:24px;
  --p12:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAEklEQVR4nGNgYGD4z0AswK4SAFXuAf85+Vd1AAAAAElFTkSuQmCC"); --p25:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAFUlEQVR4nGNgYGD4zwABMBo7wK0KAKOgA/2qf7JkAAAAAElFTkSuQmCC"); --p50:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAEUlEQVR4nGNgYGD4z4AE/gMADwMB/5OV1yAAAAAASUVORK5CYII="); --p75:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGElEQVR4nGNggID/MJoRiQMHcFkQgaECAN+oBf1D8HRSAAAAAElFTkSuQmCC"); --desk:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAGElEQVR4nGNgYGD4zwABuGi8kmB66JsAAEGoH+GKphnTAAAAAElFTkSuQmCC");
  color-scheme:light;
}
html[data-theme="dark"]{--paper:#0E0E0E; --paper-2:#1B1B1B; --ink:#F3EDE0; --ink-2:#BDB4A0; --white:#151515; --shadow:#000; color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:20px/1.5 var(--serif);overflow-x:hidden}
img{max-width:100%;display:block}
[id]{scroll-margin-top:60px}
a{color:inherit}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pix{image-rendering:pixelated;image-rendering:crisp-edges}

/* ---------- type ---------- */
.chicago{font-family:var(--chicago);font-weight:normal;letter-spacing:0}
h1,h2,h3,h4{font-family:var(--chicago);font-weight:normal;letter-spacing:0;margin:0}
h1{font-size:48px;line-height:56px}
h2{font-size:36px;line-height:44px}
h3{font-size:24px;line-height:32px}
.eyebrow{font:18px/24px var(--mono);text-transform:uppercase;margin:0 0 14px}
.dek{font-size:23px;line-height:1.42;max-width:34em;margin:0}
.sec-dek{font-size:22px;line-height:1.45;max-width:36em;margin:14px 0 44px}
.cap{font:18px/24px var(--geneva)}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
strong{font-weight:500}
@media (max-width:640px){
  h1{font-size:36px;line-height:44px} h2{font-size:24px;line-height:32px}
  .dek{font-size:20px} .sec-dek{font-size:19px}
  body{font-size:18px}
}

/* ---------- rainbow ---------- */
.rainbow{display:grid;grid-template-columns:repeat(6,1fr);height:10px}
.rainbow i:nth-child(1){background:var(--green)} .rainbow i:nth-child(2){background:var(--yellow)}
.rainbow i:nth-child(3){background:var(--orange)} .rainbow i:nth-child(4){background:var(--red)}
.rainbow i:nth-child(5){background:var(--purple)} .rainbow i:nth-child(6){background:var(--blue)}

/* ---------- menu bar ---------- */
.menubar{position:sticky;top:0;z-index:40;background:var(--white);color:var(--ink);border-bottom:2px solid var(--ink);height:44px;font:24px/44px var(--chicago)}
.menubar .wrap{display:flex;align-items:stretch;height:100%}
.menu{position:relative;display:flex}
.menu>button{all:unset;cursor:pointer;padding:0 14px;display:flex;align-items:center;gap:10px;font:inherit;color:inherit;white-space:nowrap}
.menu>button:hover,.menu>button:focus-visible,.menu.open>button{background:var(--ink);color:var(--white)}
.menu>a{display:flex;align-items:center;padding:0 14px;text-decoration:none;white-space:nowrap}
.menu>a:hover,.menu>a:focus-visible{background:var(--ink);color:var(--white)}
.drop{position:absolute;left:0;top:44px;min-width:280px;background:var(--white);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--shadow);display:none;padding:4px 0;z-index:41}
.menu.open .drop{display:block}
.drop a,.drop button{all:unset;display:block;box-sizing:border-box;width:100%;cursor:pointer;padding:0 28px 0 34px;font:24px/34px var(--chicago);color:var(--ink);white-space:nowrap;position:relative}
.drop a:hover,.drop button:hover,.drop a:focus-visible,.drop button:focus-visible{background:var(--ink);color:var(--white)}
.drop .check::before{content:"\2713";position:absolute;left:10px}
.drop hr{border:0;border-top:2px dotted var(--ink);margin:4px 0;opacity:.5}
.menubar .spacer{flex:1}
/* Pixel-art mascot icons: a two-tone image keeps the face (a flat mask lost it),
   and image-rendering:pixelated scales the 32px art up with no blur. Ink art on
   light grounds, paper art on dark; the footer is always dark so it always uses paper. */
.glove{display:inline-flex;line-height:0}
.glove img{display:block;width:32px;height:32px;image-rendering:pixelated;pointer-events:none}
.glove .paper{display:none}
html[data-theme="dark"] .glove .ink{display:none}
html[data-theme="dark"] .glove .paper{display:block}
.glove-foot{display:inline-flex;line-height:0}
.glove-foot img{display:block;width:64px;height:64px;image-rendering:pixelated}
.menubar .brand{font-family:var(--chicago)}
@media (max-width:760px){.menubar .hide-sm{display:none}}

/* ---------- Mac widgets ---------- */
.mbtn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:150px;padding:6px 26px;border:2px solid var(--ink);border-radius:9px;background:var(--white);color:var(--ink);font:24px/32px var(--chicago);text-decoration:none;white-space:nowrap;position:relative}
.mbtn:hover,.mbtn:focus-visible,.mbtn:active{background:var(--ink);color:var(--white)}
.mbtn.default{box-shadow:0 0 0 3px var(--white),0 0 0 6px var(--ink);margin:6px}
.mfield{display:flex;align-items:center;background:var(--white);color:var(--ink);border:2px solid var(--ink);padding:10px 12px;font:18px/24px var(--geneva);min-height:46px}
.caret{display:inline-block;width:2px;height:22px;background:currentColor;margin-left:1px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.mwin{background:var(--white);color:var(--ink);border:2px solid var(--ink);box-shadow:6px 6px 0 var(--shadow)}
.mwin .bar{position:relative;height:38px;border-bottom:2px solid var(--ink);background:repeating-linear-gradient(to bottom,transparent 0 6px,var(--ink) 6px 8px);background-clip:content-box;padding:6px 8px;display:flex;align-items:center;justify-content:center}
.mwin .bar .t{background:var(--white);padding:0 14px;font:24px/24px var(--chicago);position:relative}
.mwin .bar .box{position:absolute;left:12px;top:9px;width:20px;height:20px;border:2px solid var(--ink);background:var(--white)}
.mwin .body{padding:20px 24px}
.shot{border:2px solid var(--ink);background:var(--white);line-height:0;display:inline-block;max-width:100%}
.shot img{width:512px;max-width:100%;height:auto}
.shot.w640 img{width:640px}
.shot.w448 img{width:448px}
.shot.strip img{image-rendering:pixelated}
@media (max-width:560px){.shot.strip img{image-rendering:auto}}
figure{margin:0}
figcaption{font:18px/24px var(--geneva);margin-top:10px;max-width:512px}

/* ---------- sections + dither zones ---------- */
.section{padding:80px 0}
@media (max-width:640px){.section{padding:56px 0}}
.f-blue{background:var(--blue);color:#fff;--white:#fff;--ink:#151515;--shadow:#0b2a63}
.f-yellow{background:var(--yellow);color:#151515;--ink:#151515;--white:#fff;--shadow:#151515}
.f-orange{background:var(--orange);color:#151515;--ink:#151515;--white:#fff;--shadow:#151515}
.f-purple{background:var(--purple);color:#fff;--ink:#151515;--white:#fff;--shadow:#2a1245}
.f-green{background:var(--green);color:#151515;--ink:#151515;--white:#fff;--shadow:#151515}
.f-ink{background:#151515;color:#F3EDE0;--ink:#F3EDE0;--white:#151515;--shadow:#000}
.f-blue .eyebrow,.f-purple .eyebrow,.f-ink .eyebrow{opacity:.85}
.dz{height:24px;background:var(--a);position:relative;overflow:hidden}
.dz i,.dz::before,.dz::after{content:"";position:absolute;left:0;right:0;height:8px;background:var(--b)}
.dz::before{top:0;-webkit-mask:var(--p25) 0 0/8px 8px repeat;mask:var(--p25) 0 0/8px 8px repeat}
.dz i{top:8px;-webkit-mask:var(--p50) 0 0/4px 4px repeat;mask:var(--p50) 0 0/4px 4px repeat}
.dz::after{top:16px;-webkit-mask:var(--p75) 0 0/8px 8px repeat;mask:var(--p75) 0 0/8px 8px repeat}

/* ---------- hero ---------- */
.hero{padding:64px 0 56px;position:relative}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) 632px;gap:48px;align-items:center}
@media (max-width:1120px){.hero .wrap{grid-template-columns:1fr}.hero .se-col{justify-self:center}}
.hero .cta{display:flex;gap:22px;flex-wrap:wrap;margin-top:34px;align-items:center}
.hero .fine{margin-top:26px;color:var(--ink-2)}
.se-col{max-width:100%}
.se{width:616px;max-width:100%;background:#DCD5C1;border:3px solid var(--ink);border-radius:20px 20px 14px 14px;padding:26px 26px 0;box-shadow:10px 10px 0 var(--shadow);color:#151515}
.se .bezel{background:#C9C1AA;border:3px solid var(--ink);border-radius:12px;padding:18px}
.se .screen{background:#000;border:3px solid var(--ink);border-radius:6px;aspect-ratio:512/342;overflow:hidden;position:relative}
.se .screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;opacity:0;transition:opacity .08s steps(1)}
.se .screen img.on{opacity:1}
.se .chin{display:flex;align-items:center;justify-content:space-between;height:92px;padding:0 6px}
.se .badge{display:flex;align-items:center;gap:10px;font:17px/20px var(--serif);font-style:italic}
.se .badge .rainbow{width:18px;height:22px;grid-template-columns:1fr;grid-template-rows:repeat(6,1fr);border:2px solid var(--ink);border-radius:5px;overflow:hidden}
.se .drives{display:flex;flex-direction:column;gap:14px;align-items:flex-end}
.se .slot{width:150px;height:8px;background:#151515;border-radius:3px}
.se .led{width:8px;height:8px;border-radius:50%;background:var(--green);border:1px solid var(--ink)}
.se-cap{margin-top:18px;color:var(--ink-2)}
@media (max-width:640px){.se{padding:14px 14px 0;border-radius:14px} .se .bezel{padding:10px} .se .chin{height:64px} .se .slot{width:90px}}

/* ---------- prompts ---------- */
.prompts{display:grid;grid-template-columns:repeat(auto-fit,512px);justify-content:center;gap:48px 44px}
@media (max-width:600px){.prompts{grid-template-columns:1fr}}
.prompt .mfield{margin-bottom:14px}
.prompt .type{white-space:nowrap;overflow:hidden;display:inline-block;max-width:0}
.prompt.go .type{animation:typing 1.6s steps(var(--n),end) forwards}
@keyframes typing{to{max-width:100%}}
@media (prefers-reduced-motion:reduce){.prompt .type{max-width:100%} .prompt.go .type{animation:none} .caret{animation:none}}
.prompt .ret{font:18px/24px var(--geneva);opacity:.8;margin:0 0 10px 2px}
.prompt figcaption{color:inherit}
.f-blue figcaption{color:#fff}

/* ---------- thesis ---------- */
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;margin-top:48px}
@media (max-width:900px){.cols3{grid-template-columns:1fr;gap:32px}}
.cols3 h3{margin-bottom:12px}
.diagram{margin:64px 0 0;border:2px solid var(--ink);background:var(--white);padding:24px 16px 8px;overflow-x:auto}
.diagram svg{display:block;width:100%;max-width:1100px;margin:0 auto;height:auto;color:var(--ink)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);border:2px solid var(--ink);border-top:0;background:var(--white)}
.stat{padding:18px 20px 16px;border-right:2px solid var(--ink)}
.stat:last-child{border-right:0}
.stat b{display:block;font:36px/40px var(--chicago);font-weight:normal;margin-bottom:6px}
.stat span{font:18px/24px var(--geneva);color:var(--ink-2)}
@media (max-width:900px){.stats{grid-template-columns:1fr 1fr} .stat:nth-child(2){border-right:0} .stat:nth-child(-n+2){border-bottom:2px solid var(--ink)}}
@media (max-width:480px){.stats{grid-template-columns:1fr} .stat{border-right:0;border-bottom:2px solid var(--ink)} .stat:last-child{border-bottom:0}}

/* ---------- gallery ---------- */
.masonry{columns:512px;column-gap:44px}
.masonry figure{break-inside:avoid;width:512px;max-width:100%;margin:0 auto 44px}
.masonry figure.w640{width:640px}
.masonry .shot{cursor:zoom-in}
.masonry .shot img{width:100%}
.masonry figcaption{max-width:none}

/* ---------- web ---------- */
.web{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
@media (max-width:960px){.web{grid-template-columns:1fr}}
.strips{display:flex;flex-direction:column;gap:22px;align-items:flex-start}
.strips figure{max-width:100%}
.aside{border:2px solid var(--ink);padding:16px 20px;margin-top:28px;background:var(--white);box-shadow:6px 6px 0 var(--shadow)}
.aside .cap{display:block;margin-bottom:6px}

/* ---------- media ---------- */
.media{display:grid;grid-template-columns:repeat(3,1fr);gap:44px;align-items:start;margin-top:8px}
@media (max-width:960px){.media{grid-template-columns:1fr}}
.media h3{margin:14px 0 12px;display:flex;align-items:center;gap:12px}
.media svg{width:40px;height:40px;flex:none}
.receipt-wrap{display:flex;justify-content:center;margin-top:60px}
.receipt{width:340px;max-width:100%;background:#fff;color:#151515;padding:24px 18px 34px;clip-path:polygon(0 0,100% 0,100.00% calc(100% - 10px),97.73% 100%,95.45% calc(100% - 10px),93.18% 100%,90.91% calc(100% - 10px),88.64% 100%,86.36% calc(100% - 10px),84.09% 100%,81.82% calc(100% - 10px),79.55% 100%,77.27% calc(100% - 10px),75.00% 100%,72.73% calc(100% - 10px),70.45% 100%,68.18% calc(100% - 10px),65.91% 100%,63.64% calc(100% - 10px),61.36% 100%,59.09% calc(100% - 10px),56.82% 100%,54.55% calc(100% - 10px),52.27% 100%,50.00% calc(100% - 10px),47.73% 100%,45.45% calc(100% - 10px),43.18% 100%,40.91% calc(100% - 10px),38.64% 100%,36.36% calc(100% - 10px),34.09% 100%,31.82% calc(100% - 10px),29.55% 100%,27.27% calc(100% - 10px),25.00% 100%,22.73% calc(100% - 10px),20.45% 100%,18.18% calc(100% - 10px),15.91% 100%,13.64% calc(100% - 10px),11.36% 100%,9.09% calc(100% - 10px),6.82% 100%,4.55% calc(100% - 10px),2.27% 100%,0.00% calc(100% - 10px));box-shadow:none;position:relative;filter:drop-shadow(8px 8px 0 var(--shadow))}
.receipt .h{font:24px/28px var(--chicago);text-align:center}
.receipt .s{font:18px/24px var(--mono);text-align:center;margin-top:4px}
.receipt .rule{border-top:2px dotted #151515;margin:14px 0}
.receipt .img{overflow:hidden;height:190px;border:2px solid #151515}
.receipt .img img{width:100%;height:auto}
.receipt .foot{font:18px/24px var(--mono);text-align:center;margin-top:14px}

/* ---------- Palmer ---------- */
.palmer{display:grid;grid-template-columns:auto minmax(0,1fr);gap:48px;align-items:center}
@media (max-width:900px){.palmer{grid-template-columns:1fr}}
.palmer .who{display:flex;flex-direction:column;align-items:center;gap:26px}
.sprite{display:inline-flex;line-height:0}
.sprite img{display:block;width:160px;height:200px;image-rendering:pixelated;pointer-events:none}
.sprite .paper{display:none}
html[data-theme="dark"] .sprite .ink{display:none}
html[data-theme="dark"] .sprite .paper{display:block}
.balloon{position:relative;background:var(--white);border:2px solid var(--ink);border-radius:18px;padding:16px 22px;font:18px/26px var(--geneva);max-width:300px}
.balloon::before,.balloon::after{content:"";position:absolute;left:44px;bottom:-22px;border:11px solid transparent;border-top-color:var(--ink);border-bottom:0}
.balloon::after{bottom:-19px;border-top-color:var(--white)}
.palmer-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:44px;align-items:center}
@media (max-width:1000px){.palmer-grid{grid-template-columns:1fr}}

/* ---------- hardware ---------- */
.info{max-width:820px;margin:0 auto}
.info dl{margin:0;display:grid;grid-template-columns:150px 1fr;gap:0}
.info dt{font:24px/32px var(--chicago);padding:16px 0 16px;border-top:2px dotted var(--ink)}
.info dd{margin:0;padding:18px 0 16px 16px;border-top:2px dotted var(--ink)}
.info dt:first-of-type,.info dd:first-of-type{border-top:0}
@media (max-width:600px){.info dl{grid-template-columns:1fr} .info dt{padding-bottom:4px} .info dd{padding:0 0 16px;border-top:0}}

/* ---------- log ---------- */
.log{max-width:960px;margin:0 auto}
.log .body{padding:0}
.log .head,.log .row{display:grid;grid-template-columns:120px minmax(0,1fr) 90px;gap:16px;padding:10px 20px;align-items:baseline}
.log .head{font:18px/24px var(--geneva);border-bottom:2px solid var(--ink);color:var(--ink-2)}
.log .row{border-bottom:1px dotted var(--ink);font-size:19px}
.log .row:last-child{border-bottom:0}
.log .row .d{font:18px/24px var(--geneva)}
.log .row .v{font:18px/24px var(--mono);text-align:right}
@media (max-width:600px){.log .head{display:none} .log .row{grid-template-columns:1fr;gap:4px} .log .row .v{text-align:left}}

/* ---------- footer ---------- */
.foot{padding:72px 0 48px}
.foot .top{display:flex;align-items:center;gap:20px;margin-bottom:26px}
.foot .glove{width:64px;height:64px}
.foot .links{display:flex;flex-wrap:wrap;gap:8px 28px;font:18px/24px var(--geneva);margin:26px 0}
.foot .links a{text-decoration:underline;text-underline-offset:3px}
.foot .colophon{max-width:52em;color:#BDB4A0}
.foot .copy{font:18px/24px var(--mono);margin-top:30px}

/* ---------- lightbox + about ---------- */
dialog{border:2px solid #151515;background:#fff;color:#151515;padding:0;box-shadow:8px 8px 0 #151515;max-width:min(96vw,1090px)}
dialog::backdrop{background:rgba(0,0,0,.55)}
dialog img{max-width:min(1024px,92vw);height:auto;image-rendering:pixelated}
.lb-cap{font:18px/24px var(--geneva);padding:12px 16px;border-top:2px solid #151515;display:flex;justify-content:space-between;gap:16px;align-items:center}
.about{padding:0}
.about .row{display:flex;justify-content:flex-end;gap:12px;padding:14px 16px;border-top:2px solid #151515;align-items:center}
.about .row .cap{margin-right:auto}
.about .mbtn{--white:#fff;--ink:#151515}
.about img.pix{width:512px;max-width:92vw}