/* ===== Windows-ish, dense, no fluff ===== */
:root{
	--bg: #c0c0c0;
	--win-face: #d4d0c8;
	--win-face-dark: #c4c0b8;
	--win-dark: #404040;
	--win-shadow: #808080;
	--win-light: #eeeeee;
	--win-light-alt: #ebebeb;
	--win-blue: #000080;
	--win-blue-light: #1084d0;
	--text: #000;
	--link: #0000ee;
	--link-hover: #551a8b;
	--pad: 12pt; /* small, dense */
	--gap: 8pt;
	--maxw: 900pt;
	--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
	--ui: system-ui, "Segoe UI", Tahoma, Arial, sans-serif;
}
* { box-sizing: border-box; padding: 0; margin: 0; }
html, body { height: 100%; }




ul {
	padding-left: 3ch;
	margin-bottom: 0.5em;
}

body{
	margin:0;
	background: var(--bg);
	color: var(--text);
	font: 13pt/1.25 var(--ui);
}






.hline {
	display: block;
	width: 100%;
	height: 1px;
	border-bottom: solid black 1px;
	margin-top: 0.75ch;
	margin-bottom: 0.5ch;
}

.center{
	max-width: var(--maxw);
	margin: 48pt auto auto auto;
	padding: 0 var(--gap);
}

.border-protruding {
	border: 3px solid var(--win-light);
	border-right-color: var(--win-dark);
	border-bottom-color: var(--win-dark);
	border-left-color: var(--win-light-alt);
	border-top-color: var(--win-light);
}
.border-indented {
	border: 3px solid var(--win-dark);
	border-right-color: var(--win-light-alt);
	border-bottom-color: var(--win-light);
}
.border-indented.video {
	border: 6px solid var(--win-dark);
	border-right-color: var(--win-light-alt);
	border-bottom-color: var(--win-light);
}

/* Window frame */
.window {
	background: var(--win-face);
	//box-shadow:
	//inset 1pt 1pt 0 0 var(--win-light),
	//inset -1pt -1pt 0 0 var(--win-shadow);
	
	//padding: var(--gap);
	
	margin: var(--gap);
	
	position: relative;
  display: flex;
  flex-direction: column;
  
}

.top.window {
	margin: var(--gap);
	transform: translateY(48pt)
	
	position: relative;
  display: flex;
  flex-direction: column;
  
  padding-bottom: 2em;
}

.titlebar{
	/* Win98 gradient: dark (left) -> light (right) */
	background: linear-gradient(to right, var(--win-blue), var(--win-blue-light));
	color: #fff;
	padding: 4pt 6pt;
	font-weight: 700;
	display:flex; align-items:top; justify-content:space-between;
	
	color:#fff;
	
	text-decoration:none;
	
	border-bottom: solid var(--win-dark) 1px;
}
.titlebar button {
	//font-weight: 400; opacity:.9;
	width: 1.5em;
	
	background-image: url('/images/close.png');
 background-size: cover;
 background-repeat: no-repeat;
 background-position: center;
}

.titlebar div button {
	height: 1.5em;
}
.content{ 
	//padding: var(--pad); 
	//margin-left: var(--gap);
	//margin-right: var(--gap);
	//padding-left: var(--gap);
	overflow-y: scroll;
   overflow: auto;
  
  scrollbar-gutter: stable both-edges;
  height: 100%;
  
  //max-height: 60ch;
  
}

.top.window > .content{
	overflow: visible;
  min-height: 30ch;
  //min-width: 40em;
}

.content  {
	padding: var(--gap);
	
	border-bottom: solid var(--win-dark) 1px;
}

/* size */
.content::-webkit-scrollbar{
  width: 16px;
  height: 16px;
}

/* track: recessed groove */
.content::-webkit-scrollbar-track{
  background: var(--win-light-alt);
  box-shadow:
    inset 1px 1px 0 var(--win-light),
    inset -1px -1px 0 var(--win-dark);
}

/* thumb: square, raised */
.content::-webkit-scrollbar-thumb{
  background: var(--win-face);
  border-radius: 0 !important;
  border: 1px solid var(--win-shadow);
  border-left-color: var(--win-light);
  border-top-color:  var(--win-light);
  border-right-color: var(--win-dark);
  border-bottom-color: var(--win-dark);
  min-height: 28px;
  box-shadow: none;
}

.content::-webkit-scrollbar-thumb:hover{
  background: var(--win-face);
}
.content::-webkit-scrollbar-thumb:active{
  background: var(--win-face);
  border-left-color: var(--win-dark);
  border-top-color:  var(--win-dark);
  border-right-color: var(--win-light);
  border-bottom-color: var(--win-light);
}

/* buttons: square beveled pads with proper arrows */
.content::-webkit-scrollbar-button{
  width: 16px;
  height: 16px;
  background: var(--win-face);
  border: none;
  box-shadow:
    inset 1px 1px 0 var(--win-light),
    inset -1px -1px 0 var(--win-dark);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 9px 9px;       /* arrow size */
}

/* Up */
.content::-webkit-scrollbar-button:single-button:vertical:decrement{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M5 3 L8 7 H2 Z' fill='%23404040'/></svg>");
}
/* Down */
.content::-webkit-scrollbar-button:single-button:vertical:increment{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M2 3 H8 L5 7 Z' fill='%23404040'/></svg>");
}
/* Left */
.content::-webkit-scrollbar-button:single-button:horizontal:decrement{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M3 5 L7 2 V8 Z' fill='%23404040'/></svg>");
}
/* Right */
.content::-webkit-scrollbar-button:single-button:horizontal:increment{
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M7 5 L3 8 V2 Z' fill='%23404040'/></svg>");
}

/* corner block for both scrollbars visible */
.content::-webkit-scrollbar-corner{
  background: var(--win-face);
  box-shadow:
    inset 1px 1px 0 var(--win-light),
    inset -1px -1px 0 var(--win-dark);
}


/* Header brand */
.brand{
	display:flex; align-items:baseline; gap:10pt; flex-wrap:wrap;
	padding: var(--pad);
	
	height: 2.6em;
}
.brand h1{
	font: 700 18pt/1 var(--ui);
	margin:0;
}
.brand code{
	font: 12pt/1 var(--mono);
	background: #fff;
	border: 1pt solid var(--win-shadow);
	padding: 1pt 3pt;
	box-shadow: inset 1pt 1pt 0 #fff, inset -1pt -1pt 0 #ccc;
}

.brand .right {
	//margin-left: auto;
	margin: auto 0.5em auto auto;
}
.brand .left {
	
}
.brand button.right {
	//background: var(--win-face);
}

.video {
	max-width: 100%;
	max-height: auto;
}

/* Menu */
.menu{
	display:grid;
	grid-template-columns: repeat(auto-fit, minmax(260pt, 1fr));
	gap: var(--gap);
	margin: var(--gap) 0 var(--gap);
}
.menu a{
	display:block;
	text-decoration:none;
	color:inherit;
	background:#e4e0d8;
	
	//box-shadow:
	//inset 1pt 1pt 0 0 var(--win-light),
	//inset -1pt -1pt 0 0 var(--win-shadow);
	padding: 8pt;
	
	height: 5.55em;
}
.menu a:hover, .menu a:focus{
	outline:none;
	background:#fff;
}
.menu h3{
	margin:0 0 4pt 0;
	font-size:14pt;
}
.menu p{
	margin:0;
	color:#111;
	opacity:.85;
	font-size:12pt;
}

/* Panels shown via :target */
.panel{
	//display:none;
	//margin-top: var(--gap);
	
}
//.panel:target{ display:block; }
/* Show menu when no target is active */
body:not(:has(.panel:target)) #home { display:block; }

#home.panel {
	//margin-left: var(--gap);
	//margin-right: var(--gap);
}

.window .panel .content .video {
	margin-top: var(--gap);
}
.window .panel .content p {
	margin-bottom: var(--gap);
}
.window .panel .content h2,h3,h4 {
	margin-bottom: var(--gap);
}

#portfolio .content .entry {
	margin-bottom: 1.5em;
}

#portfolio .content .entry p {
	max-width: 80ch;
}

.entry h3 {
	border-bottom: solid black 1px;
}

button#email-list-submit {
	//margin-left: 1ch;
	padding: 0.15em;
}
#email-list-email {
	margin-right: 1ch;
	width: 35ch;
	min-width: 20ch;
	//max-width: 50%;
}

ul.info-table {
	list-style: none;
	margin-left: 0;
	padding-left: 0;
	width: 60%;
}

.inline-image {
	//image-rendering: pixelated;
}

.window .content ul.info-table li .left {
	display: inline-block;
	width: 20ch;
}
.window .content ul.info-table li .right {
	display: inline-block;
	width: 40ch;
	max-width: 100%;
}

ul.info-table li {
	margin-bottom: 6px;
}


/* Info lists */
.kv{ display:grid; grid-template-columns: 140pt 1fr; gap: 2pt 8pt; margin: 6pt 0; }
.kv div{ padding:2pt 0; }
.hr{ height:1pt; background: var(--win-shadow); margin: 6pt 0; }

/* Links */
a { color: var(--link); }
a:hover, a:focus { color: var(--link-hover); }

/* Footer */
.footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;

  margin: 0; /* margin-top no longer needed */
  padding: 0pt var(--pad) 4pt var(--pad);

  display: flex;
  justify-content: space-between;
  gap: 8pt;
  flex-wrap: wrap;

  font-size: 12pt;
  opacity: .85;
  
}

/* Small screens tweaks */
@media (max-width:480pt){
	.kv{ grid-template-columns: 1fr; }
	.brand{ 
		gap:6pt; 
		height: 6em;
	}

	.brand > * {
		margin: 0;
	}
	
	.brand .right {
		margin: 0;
	}
	
	.menu {
		//padding-top: 8px;
	}
	
	.content {
		padding: 0;
		margin: 0;
		margin-top: 6px;
		padding-bottom: 12px;
	}
	.window.top {
		//padding: 3px;
		margin: 0;
		margin-bottom: 30px;
	}
	.window {
		//margin: var(--pad);;
		margin: 3px;
	}
	
	ul.info-table {
		width: 100%;
	}
	
	.menu {
		margin-left: 3px;
		margin-right: 3px;
	}
}
.center {
		padding-bottom: 5em;
	}

.hidden {
	opacity: 0;
}

.disabled {
	display: none;
}

.right-aligned {
	text-align: right;
	margin-left: auto;
}

.silent-link:any-link {
  color: inherit;
  text-decoration: none;
  font: inherit;           /* grabs size, family, weight, line-height, etc. */
}

/* keep it the same on hover/active/visited */
.silent-link:hover,
.silent-link:active,
.silent-link:visited {
  color: inherit;
  text-decoration: none;
}

/* keep a visible focus ring for keyboard users; remove or tweak if you truly want zero change */
.silent-link:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

button {
	background: var(--win-face);
	
	padding: 0.3em;
}

button:active {
	border: 3px solid var(--win-dark);
	border-right-color: var(--win-light-alt);
	border-bottom-color: var(--win-light);
	background: var(--win-face-dark);
	transform: translate(1px, 1px);
}

.titlebar button {
	//font-weight: 400; opacity:.9;
	width: 1.5em;
	
	background-image: url('/images/close.png');
	 background-size: cover;         /* scale image to fill area */
	 background-repeat: no-repeat;   /* don’t tile */
	 background-position: center;    /* keep it centered */
}