/* "Supply Mono" (PP Supply Mono, Pangram Pangram Foundry), same font as the
   Movie Tracker's Windows 95 theme. Regular for interface text, the lighter 200
   weight for long reading text. */
@font-face{font-family:'Supply Mono';src:url(/fonts/supply-mono-normal.otf) format('opentype');font-weight:normal;font-display:swap;}
@font-face{font-family:'Supply Mono';src:url(/fonts/supply-mono-200.otf) format('opentype');font-weight:200;font-display:swap;}

:root{
  --desktop:#008080;
  --panel:#c0c0c0;
  --hi:#ffffff;
  --sh:#808080;
  --dk:#000000;
  --blue:#000080;
  --blue-2:#1084d0;
  --ink:#000000;
  --font:'Supply Mono','Lucida Console',Consolas,'Courier New',monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{background:var(--desktop);color:var(--ink);font:12px/1.4 var(--font);overflow:hidden;}
a{color:var(--blue);}
img{display:block;}
.noscript{position:fixed;inset:0;display:grid;place-items:center;color:#fff;font-size:16px;}

/* ---------- bevels ---------- */
.raised{border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);box-shadow:inset -1px -1px var(--sh),inset 1px 1px #dfdfdf;}
.sunken{border:2px solid;border-color:var(--sh) var(--hi) var(--hi) var(--sh);box-shadow:inset 1px 1px var(--dk);}
.btn{font:inherit;background:var(--panel);color:var(--ink);padding:4px 12px;cursor:pointer;border:2px solid;border-color:var(--hi) var(--dk) var(--dk) var(--hi);box-shadow:inset -1px -1px var(--sh),inset 1px 1px #dfdfdf;}
.btn:active:not(:disabled),.btn.pressed{border-color:var(--dk) var(--hi) var(--hi) var(--dk);box-shadow:inset 1px 1px var(--sh);}
.btn:disabled{color:var(--sh);text-shadow:1px 1px var(--hi);cursor:default;}
.btn:focus-visible{outline:1px dotted var(--dk);outline-offset:-5px;}

/* ---------- desktop icons ---------- */
.desktop{position:absolute;inset:0 0 30px 0;user-select:none;-webkit-user-select:none;}
.post,.mail{user-select:text;-webkit-user-select:text;}
.icons{position:absolute;top:10px;left:8px;display:flex;flex-direction:column;gap:14px;z-index:1;}
.dicon{width:76px;display:flex;flex-direction:column;align-items:center;gap:4px;background:none;border:0;padding:2px;font:inherit;color:#fff;cursor:pointer;text-align:center;}
.dicon span{padding:1px 3px;border:1px dotted transparent;}
.dicon:focus{outline:none;}
.dicon:focus span{background:var(--blue);border-color:#ff0;}
.dicon svg{width:34px;height:34px;}

/* ---------- windows ---------- */
.win{position:absolute;display:flex;flex-direction:column;background:var(--panel);padding:3px;min-width:260px;}
.win.hidden{display:none;}
.titlebar{display:flex;align-items:center;gap:6px;padding:3px 3px 3px 4px;background:linear-gradient(90deg,var(--sh),#b5b5b5);color:#dcdcdc;font-weight:bold;user-select:none;cursor:default;touch-action:none;}
.win.active .titlebar{background:linear-gradient(90deg,var(--blue),var(--blue-2));color:#fff;}
.titlebar .t{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.titlebar svg{width:16px;height:16px;flex-shrink:0;}
.tb-btns{display:flex;gap:2px;}
.tb-btns button{width:18px;height:16px;padding:0;display:grid;place-items:center;font:bold 11px/1 var(--font);}
.tb-btns button + .x{margin-left:2px;}
.menubar{display:flex;gap:2px;padding:2px 0;}
.menubar span{padding:2px 7px;}
.menubar span:first-letter{text-decoration:underline;}
.addr{display:flex;align-items:center;gap:6px;padding:2px 2px 4px;}
.addr .back{padding:2px 8px;margin-right:4px;}
.addr .sunken{flex:1;background:#fff;padding:2px 4px;white-space:nowrap;overflow:hidden;}
.pane{flex:1;background:#fff;overflow:auto;min-height:0;}
.status{display:flex;gap:2px;margin-top:3px;}
.status div{padding:1px 6px;}
.status div:first-child{flex:1;}

/* resize handles: invisible strips on every edge, plus the striped grip
   in the bottom-right corner of windows with a status bar */
.rz{position:absolute;z-index:3;touch-action:none;}
.rz-n,.rz-s{left:8px;right:8px;height:6px;cursor:ns-resize;}
.rz-e,.rz-w{top:8px;bottom:8px;width:6px;cursor:ew-resize;}
.rz-n{top:-3px;} .rz-s{bottom:-3px;} .rz-e{right:-3px;} .rz-w{left:-3px;}
.rz-ne,.rz-nw,.rz-se,.rz-sw{width:14px;height:14px;}
.rz-ne{top:-3px;right:-3px;cursor:nesw-resize;} .rz-sw{bottom:-3px;left:-3px;cursor:nesw-resize;}
.rz-nw{top:-3px;left:-3px;cursor:nwse-resize;} .rz-se{bottom:-3px;right:-3px;cursor:nwse-resize;}
.has-status .rz-se{bottom:3px;right:3px;width:13px;height:13px;
  background:linear-gradient(135deg,transparent 0 45%,var(--hi) 45% 52%,var(--sh) 52% 62%,transparent 62% 65%,var(--hi) 65% 72%,var(--sh) 72% 82%,transparent 82% 85%,var(--hi) 85% 92%,var(--sh) 92%);}
.has-status .status div:last-child{padding-right:16px;}
.dlgwin .rz{display:none;}

/* explorer grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px 12px;padding:14px;}
.tile{background:none;border:0;padding:0;font:inherit;color:var(--ink);text-decoration:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;}
.tile .thumb{width:100%;aspect-ratio:4/3;background:#000;padding:0;overflow:hidden;}
.tile .thumb img{width:100%;height:100%;object-fit:cover;}
.tile .cap{padding:1px 4px;border:1px dotted transparent;line-height:1.3;text-transform:uppercase;}
.tile .meta{color:var(--sh);margin-top:-4px;text-transform:capitalize;}
.tile:hover .cap,.tile:focus .cap{background:var(--blue);color:#fff;border-color:#ff0;}
.tile:focus{outline:none;}

/* post reader */
.post{padding:16px 18px 28px;display:flex;flex-direction:column;gap:14px;max-width:760px;margin:0 auto;}
.post header h1{font-size:22px;margin:0;font-weight:bold;letter-spacing:.5px;text-transform:uppercase;line-height:1.2;}
.post header .date{color:var(--sh);margin-top:4px;text-transform:capitalize;}
.post h2{font-size:15px;margin:6px 0 0;}
.post p,.post li{margin:0;font-size:13px;line-height:1.7;font-weight:200;}
.post ol,.post ul{margin:0;padding-left:24px;display:flex;flex-direction:column;gap:4px;}
.player{background:#000;position:relative;width:100%;}
.player iframe,.player video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;}
.post figure{margin:0;}
.post figure img{max-width:100%;height:auto;margin:0 auto;}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:6px;}
.gallery button{padding:0;border:0;background:#000;cursor:zoom-in;aspect-ratio:4/3;overflow:hidden;}
.gallery button img{width:100%;height:100%;object-fit:cover;}
.gallery button:focus-visible{outline:2px solid var(--blue);outline-offset:1px;}

/* image viewer */
.viewer{display:flex;flex-direction:column;height:100%;background:var(--panel);outline:none;}
.viewer-tools{display:flex;gap:4px;align-items:center;padding:0 0 4px;}
/* the photo always fills the window edge to edge (width or height, whichever
   runs out first); the leftover space is plain Windows gray */
.viewer-img{flex:1;min-height:0;background:var(--panel);position:relative;overflow:hidden;}
.viewer-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;}
.pane:has(.viewer){background:var(--panel);border:0;box-shadow:none;}

/* contact form ("Recycle Bin") */
.pane:has(.mail),.pane:has(.dlg){background:var(--panel);border:0;box-shadow:none;}
.mail{display:flex;flex-direction:column;gap:6px;height:100%;padding:2px 6px 6px;}
.mail-tools{display:flex;align-items:center;gap:10px;padding:2px 0 6px;border-bottom:1px solid var(--sh);box-shadow:0 1px var(--hi);margin-bottom:4px;}
.send{display:flex;flex-direction:column;align-items:center;gap:2px;padding:4px 10px;}
.send svg{width:20px;height:20px;}
.mail-field{display:flex;align-items:center;gap:6px;}
.mail-field span{width:56px;text-align:right;}
.mail input,.mail textarea{font:inherit;font-weight:200;color:var(--ink);background:#fff;padding:3px 4px;border-radius:0;outline:none;}
.mail input{flex:1;min-width:0;}
/* fixed recipient: looks like a disabled field, not editable or focusable */
.mail-to{flex:1;min-width:0;padding:3px 4px;background:var(--panel);color:#404040;font-weight:200;user-select:none;}
.mail textarea{flex:1;min-height:120px;resize:none;}
.mail .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;}
.dlg{padding:14px 14px 10px;display:flex;flex-direction:column;align-items:center;gap:12px;}
.dlg-row{display:flex;gap:12px;align-items:center;width:100%;}
.dlg-row p{margin:0;}
.dlg-ico{flex-shrink:0;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:bold 18px/1 Georgia,serif;color:#fff;background:#00f;border:1px solid #000;}
.dlg-ico.x{background:#f00;font-family:var(--font);}
.dlg .ok{min-width:76px;}
.win.dlgwin{height:auto !important;min-width:0;}
.dlgwin .mn,.dlgwin .mx{display:none;}

/* ---------- taskbar ---------- */
.taskbar{position:fixed;left:0;right:0;bottom:0;height:30px;background:var(--panel);border-top:1px solid #dfdfdf;box-shadow:inset 0 1px var(--hi);display:flex;align-items:center;gap:4px;padding:2px 3px;z-index:9000;}
.start{display:flex;align-items:center;gap:4px;font-weight:bold;padding:2px 6px;height:24px;}
.start svg{width:18px;height:16px;}
.tasks{flex:1;display:flex;gap:3px;min-width:0;overflow:hidden;}
.task{flex:0 1 160px;min-width:0;height:24px;padding:2px 6px;display:flex;align-items:center;gap:4px;text-align:left;}
.task svg{width:14px;height:14px;flex-shrink:0;}
.task span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.task.pressed{font-weight:bold;background-image:repeating-conic-gradient(var(--panel) 0 25%,#fff 0 50%);background-size:2px 2px;}
.tray{height:24px;padding:0 10px;display:flex;align-items:center;white-space:nowrap;}

/* start menu */
.startmenu{position:fixed;left:2px;bottom:28px;display:flex;background:var(--panel);z-index:9500;min-width:200px;}
.startmenu.hidden{display:none;}
.startmenu .banner{width:24px;background:linear-gradient(0deg,var(--blue),var(--blue-2));color:#c0c0c0;writing-mode:vertical-rl;transform:rotate(180deg);font-weight:bold;font-size:15px;padding:8px 2px;white-space:nowrap;}
.startmenu .banner b{color:#fff;}
.startmenu ul{list-style:none;margin:0;padding:2px;flex:1;}
.startmenu li button{width:100%;display:flex;align-items:center;gap:10px;background:none;border:0;padding:6px 18px 6px 6px;font:inherit;color:var(--ink);cursor:pointer;text-align:left;}
.startmenu li button:hover,.startmenu li button:focus{background:var(--blue);color:#fff;outline:none;}
.startmenu li button svg{width:24px;height:24px;}
.startmenu .sep{height:2px;margin:3px 2px;border-top:1px solid var(--sh);border-bottom:1px solid var(--hi);}

/* shutdown screen */
.shutdown{position:fixed;inset:0;background:#000;color:#f80;display:none;place-items:center;font-size:22px;text-align:center;z-index:99999;cursor:pointer;padding:16px;}
.shutdown.on{display:grid;}

/* ---------- phone layout: windows go full width, no dragging ---------- */
@media (max-width:700px){
  .icons{flex-direction:row;flex-wrap:wrap;left:0;right:0;justify-content:center;gap:4px;}
  .win{left:6px !important;right:6px;top:96px !important;bottom:36px;width:auto !important;height:auto !important;min-width:0;}
  .win.dlgwin{top:30% !important;bottom:auto;}
  .grid{grid-template-columns:repeat(2,1fr);gap:14px 10px;padding:10px;}
  .post{padding:12px 10px 24px;}
  .gallery{grid-template-columns:repeat(3,1fr);gap:4px;}
  .tb-btns .mx{display:none;}
  .rz{display:none;}
  .task{flex-basis:110px;}
  .menubar{display:none;}
}