/* ===========================================================================
   NSBeep — System 1.0 (1984 Macintosh) edition
   Pure 1-bit: only #000 (--ink) and #fff (--paper). Every "gray" is a dither.
   Fonts: Chicago (ChiKareGo2), ChicagoFLF (vector display), Geneva
   (FindersKeepers), Monaco — by Giles Booth (CC-BY) / via system.css (MIT).
   =========================================================================== */

@font-face{font-family:'Chicago';
	src:url('/fonts/ChiKareGo2.woff2') format('woff2'),url('/fonts/ChiKareGo2.woff') format('woff');
	font-weight:normal;font-style:normal;font-display:swap}
@font-face{font-family:'ChicagoFLF';
	src:url('/fonts/ChicagoFLF.woff2') format('woff2'),url('/fonts/ChicagoFLF.woff') format('woff');
	font-weight:normal;font-style:normal;font-display:swap}
@font-face{font-family:'Geneva';
	src:url('/fonts/FindersKeepers.woff2') format('woff2'),url('/fonts/FindersKeepers.woff') format('woff');
	font-weight:normal;font-style:normal;font-display:swap}
@font-face{font-family:'Monaco';
	src:url('/fonts/monaco.woff2') format('woff2'),url('/fonts/monaco.woff') format('woff');
	font-weight:normal;font-style:normal;font-display:swap}

:root{
	--ink:#000;
	--paper:#fff;
	--font-chicago:'Chicago','ChicagoFLF',Geneva,Tahoma,sans-serif;
	--font-display:'ChicagoFLF','Chicago',Geneva,sans-serif;
	--font-geneva:'Geneva','ChicagoFLF',Verdana,sans-serif;
	--font-mono:'Monaco',Consolas,'Lucida Console',monospace;
	--menubar-h:20px;
	--max:1080px;
}

*{box-sizing:border-box}

html{ -webkit-text-size-adjust:100%; }

body{
	margin:0;
	color:var(--ink);
	background:var(--paper);
	font-family:var(--font-geneva);
	font-size:16px;
	line-height:1.55;
	-webkit-font-smoothing:none;
	-moz-osx-font-smoothing:unset;
	text-rendering:optimizeSpeed;
}

a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--ink);color:var(--paper)}

/* crisp 1-bit bitmaps */
.dither{image-rendering:pixelated;image-rendering:crisp-edges}

/* 50% gray = 1px checkerboard of pure black/white ---------------------------*/
.dither-50{
	background-color:var(--paper);
	background-image:
		linear-gradient(45deg,var(--ink) 25%,transparent 25% 75%,var(--ink) 75%),
		linear-gradient(45deg,var(--ink) 25%,transparent 25% 75%,var(--ink) 75%);
	background-size:2px 2px;
	background-position:0 0,1px 1px;
}

/* ---------------------------------------------------------------- menu bar --*/
.menu-bar{
	position:fixed;top:0;left:0;right:0;z-index:100;
	height:var(--menubar-h);
	display:flex;align-items:stretch;
	background:var(--paper);
	border-bottom:1px solid var(--ink);
	font-family:var(--font-chicago);
	font-size:15px;
}
.menu-bar .menus{display:flex;align-items:stretch;margin:0;padding:0;list-style:none}
.menu-bar .menus > li{display:flex;align-items:center;padding:0 11px;cursor:default;user-select:none}
.menu-bar .menus > li.apple{padding:0 12px}
.menu-bar .apple svg{width:14px;height:16px;fill:var(--ink)}
.menu-bar .menus > li.static:hover,.menu-bar .apple:hover{background:var(--ink);color:var(--paper)}
.menu-bar .apple:hover svg{fill:var(--paper)}
.menu-bar .spacer{flex:1}
.menu-bar .menu-right{display:flex;align-items:center;padding:0 12px;font-size:15px}

/* File menu dropdown */
.menu-bar .menus > li.menu{position:relative;padding:0}
.menu-title{font-family:inherit;font-size:inherit;line-height:1;color:inherit;background:none;border:0;
	padding:0 11px;height:100%;display:flex;align-items:center;cursor:default}
.menu.open .menu-title,.menu-title:hover{background:var(--ink);color:var(--paper)}
.menu-dd{display:none;position:absolute;top:100%;left:0;min-width:174px;margin:0;padding:3px 0;list-style:none;
	background:var(--paper);border:1px solid var(--ink);box-shadow:2px 2px 0 0 var(--ink);z-index:200}
.menu.open .menu-dd{display:block}
.menu-dd li{display:block}
.menu-dd a{display:block;padding:4px 18px;white-space:nowrap;font-family:var(--font-chicago);font-size:15px}
.menu-dd a:hover{background:var(--ink);color:var(--paper)}

/* ----------------------------------------------------------------- desktop --*/
.desktop{
	min-height:100vh;
	padding:calc(var(--menubar-h) + 26px) 20px 40px;
}
.desktop-inner{max-width:var(--max);margin:0 auto;display:flex;flex-direction:column;gap:26px}

/* free-floating desktop icons (disk, trash) */
.desk-icon{
	position:fixed;z-index:5;width:84px;text-align:center;
	display:flex;flex-direction:column;align-items:center;gap:4px;
	font-family:var(--font-geneva);font-size:14px;
}
.desk-icon svg{width:48px;height:48px}
.desk-icon .label{background:var(--paper);padding:0 3px}
.desk-disk{top:calc(var(--menubar-h) + 18px);right:22px}
.desk-trash{bottom:22px;right:26px}

/* ------------------------------------------------------------------ window --*/
.window{
	position:relative;
	background:var(--paper);
	border:1px solid var(--ink);
	border-radius:3px;
	box-shadow:2px 2px 0 0 var(--ink);   /* HARD shadow: blur 0, spread 0 */
}

.title-bar{
	position:relative;display:flex;align-items:center;
	height:20px;padding:0 6px;
	border-bottom:1px solid var(--ink);
	background:var(--paper);
}
/* racing stripes = focus. 6 lines: 12px band of 1px-on/1px-off, centred. */
.title-bar::before{
	content:"";position:absolute;left:6px;right:6px;top:50%;transform:translateY(-50%);
	height:12px;
	background-image:repeating-linear-gradient(to bottom,var(--ink) 0 1px,transparent 1px 2px);
	pointer-events:none;
}
.window.inactive .title-bar::before{display:none}
.title-bar .close{
	position:relative;z-index:1;
	width:13px;height:13px;flex:0 0 auto;margin-right:8px;
	background:var(--paper);border:1px solid var(--ink);
	box-shadow:0 0 0 3px var(--paper);   /* knock a gap in the stripes */
	cursor:pointer;
}
.title-bar .close:hover{background:var(--ink)}
.title-bar .title{
	position:relative;z-index:1;margin:0 auto;padding:0 10px;
	background:var(--paper);
	font-family:var(--font-chicago);font-size:15px;line-height:20px;white-space:nowrap;
}
.title-bar .title-pad{width:13px;flex:0 0 auto;margin-left:8px}  /* balances the close box so title stays centred */

.window-body{padding:20px}

/* ------------------------------------------------------------- about window -*/
.about-body{display:flex;gap:24px;align-items:flex-start}
.about-body .happy-mac{flex:0 0 auto}
.about-body .happy-mac img{height:clamp(40px,7vw,72px);width:auto;display:block}
.display{
	font-family:var(--font-display);
	font-size:clamp(40px,7vw,72px);
	line-height:1.0;
	margin:0 0 14px;
	font-weight:normal;
}
.lead{margin:0 0 12px;font-size:16px;max-width:52ch}
.trust{margin:0 0 20px;font-family:var(--font-geneva);font-size:16px}

/* ------------------------------------------------------------ finder window -*/
.finder-head{
	display:flex;justify-content:space-between;align-items:center;
	padding:4px 10px;border-bottom:1px solid var(--ink);
	font-family:var(--font-geneva);font-size:14px;
}
.icon-grid{
	list-style:none;margin:0;padding:18px;
	display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
}
.icon-grid li a{
	display:flex;flex-direction:column;align-items:center;gap:8px;
	padding:14px 8px;text-align:center;border-radius:2px;
}
.icon-grid .ic{width:64px;height:64px}
.icon-grid .nm{
	font-family:var(--font-geneva);font-size:14px;line-height:1.2;
	padding:1px 5px;max-width:100%;
}
.icon-grid li a:hover,.icon-grid li a:focus-visible{outline:none}
.icon-grid li a:hover .nm,.icon-grid li a:focus-visible .nm{background:var(--ink);color:var(--paper)}
.icon-grid li a:hover .ic,.icon-grid li a:focus-visible .ic{filter:invert(1)}

/* --------------------------------------------------------------- buttons ----*/
.btn{
	display:inline-flex;align-items:center;justify-content:center;gap:6px;
	min-height:28px;padding:3px 18px;
	background:var(--paper);color:var(--ink);
	border:1px solid var(--ink);border-radius:14px;
	font-family:var(--font-chicago);font-size:15px;line-height:1;cursor:pointer;
}
.btn:hover,.btn:active{background:var(--ink);color:var(--paper)}
.btn-default{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink)}  /* default = double ring */

/* ----------------------------------------------------------- detail (app) ---*/
.app-window .window-body{padding:0}
.app-shotwrap{
	border-bottom:1px solid var(--ink);
	padding:22px;display:flex;justify-content:center;
	background:var(--paper);
}
.app-shotwrap img{max-width:100%;height:auto;border:1px solid var(--ink)}
.app-main{padding:22px}
.app-head{display:flex;gap:18px;align-items:flex-start;margin-bottom:6px}
.app-head .app-icon{width:64px;height:64px;flex:0 0 auto}
.app-name{font-family:var(--font-chicago);font-size:28px;line-height:1.1;margin:2px 0 6px}
.about-mark{display:block;width:64px;height:auto;margin:0 0 18px}
.app-meta{font-family:var(--font-mono);font-size:13px;margin:0}
.app-meta .sep{padding:0 4px}
.app-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:20px 0 4px}
.app-section{margin-top:24px;padding-top:18px;border-top:1px solid var(--ink)}
.app-section h2{font-family:var(--font-chicago);font-size:16px;margin:0 0 12px}
.app-prose{font-size:16px;line-height:1.6}
.app-prose p{margin:0 0 14px}
.app-prose p:last-child{margin-bottom:0}

/* spec sheet (Get Info style) */
.app-info{margin:0;border:1px solid var(--ink)}
.info-row{display:flex;justify-content:space-between;gap:16px;padding:7px 12px;font-family:var(--font-geneva);font-size:14px}
.info-row + .info-row{border-top:1px solid var(--ink)}
.info-row dt{opacity:1}
.info-row dd{margin:0;text-align:right}

.back-link{font-family:var(--font-geneva);font-size:14px;display:inline-block;margin-bottom:14px}
.back-link:hover{background:var(--ink);color:var(--paper)}

/* ----------------------------------------------------------------- footer ---*/
.sys-footer{
	max-width:var(--max);margin:34px auto 40px;
	background:var(--paper);border:1px solid var(--ink);border-radius:3px;
	box-shadow:2px 2px 0 0 var(--ink);
	padding:16px 18px;
	font-family:var(--font-geneva);font-size:16px;line-height:1.6;
	display:flex;flex-wrap:wrap;gap:10px 20px;justify-content:space-between;align-items:center;
}
.sys-footer a:hover{background:var(--ink);color:var(--paper)}
.sys-footer .credit{max-width:62ch;line-height:1.6}

/* --------------------------------------------------------------- scrollbars -*/
::-webkit-scrollbar{width:16px;height:16px;background:var(--paper)}
::-webkit-scrollbar-track{
	background-color:var(--paper);
	background-image:
		linear-gradient(45deg,var(--ink) 25%,transparent 25% 75%,var(--ink) 75%),
		linear-gradient(45deg,var(--ink) 25%,transparent 25% 75%,var(--ink) 75%);
	background-size:2px 2px;background-position:0 0,1px 1px;
	border-left:1px solid var(--ink);
}
::-webkit-scrollbar-thumb{background:var(--paper);border:1px solid var(--ink)}
html{scrollbar-color:var(--ink) var(--paper);scrollbar-width:auto}  /* Firefox fallback */

/* -------------------------------------------------------------- responsive --*/
@media (max-width:720px){
	.icon-grid{grid-template-columns:repeat(3,1fr)}
	.desk-disk,.desk-trash{display:none}
	.about-body{flex-direction:column;gap:16px}
}
@media (max-width:460px){
	.icon-grid{grid-template-columns:repeat(2,1fr)}
	.app-head{flex-direction:column;gap:10px}
}