/* andrewhamilton.net — everything that differs from stock LittleLink.
   style.css, brands.css and reset.css stay untouched so upstream updates
   can be dropped straight in. Loaded after them. */
/* Palette inherited from the old holding page (holding-page/css).
   Forced dark: <html class="theme-dark">. */
:root.theme-dark body {
	background-color:#232627;       /* old page background */
	color:#8b9193;                  /* old #393c3d lifted to 4.8:1 */
}
:root.theme-dark h1 {
	color:#b0b4b5;                  /* old #555a5b lifted to 7.3:1 */
}
:root.theme-dark a:not(.button) {
	color:#8b9193;                  /* old #555a5b lifted to 4.8:1 */
}
:root.theme-dark a:not(.button):hover,
:root.theme-dark a:not(.button):active {
	color:#f4aa00;                  /* old hover = the face */
}
:root.theme-dark :focus-visible {
	outline-color:#f4aa00;
}

/* The face is portrait (vector, traced from the 400px avatar), not a
   square avatar — show it whole. */
.avatar.avatar--none {
	width:66px;
	height:103px;
	border-radius:0;
	object-fit:contain;
}

/* Helvetica from the visitor's system — no web font is downloaded.
   Macs and iPhones have it; Windows and Android fall back to Arial. */
body {
	font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Buttons: in the page's greys at rest, brand colours on hover/focus.
   The brand rules in brands.css are left alone — this only masks them
   until the button is hovered or keyboard-focused. `background` (not
   background-color) so Instagram's gradient is masked too. */
.button-stack .button {
	border:1px solid transparent;   /* no brand outlines (X, Threads, Flickr, GitHub, email); same box size at rest and on hover */
	background-origin:border-box;   /* Instagram's gradient fills under the transparent border */
	transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.button-stack .button:not(:hover):not(:focus-visible) {
	background:#2c3032;
	color:#b0b4b5;
	border:1px solid #3d4244;
}
.button-stack .button:not(:hover):not(:focus-visible) .icon {
	filter:grayscale(1) brightness(0.7);
}

/* LittleLink Extended adds a global hover (brightness 90% + 1px lift).
   Cancelled so every button hovers the same way: straight to brand colour. */
.button-stack .button:hover {
	filter:none;
	transform:none;
}

/* Photo in a Mac OS System 7 document window, CSS only.
   Measured pixel-for-pixel from a System 7 TextEdit window: 1 CSS px = 1 Mac
   pixel. Title bar 19 rows (black top frame, #CCCCFB highlight row/column,
   #EEEEEE face with six #777777 stripes, #9999C8 shadow row/column, black
   separator). Close and zoom boxes are 11x11, 8px in from each end, with a
   1px #EEEEEE gap cutting the stripes. Window: 1px black frame + 1px black
   drop shadow offset (1,1).
   The title is Chicago 12 (ChiKareGo2 at 16px: 64 units per Mac pixel).
   Title panel = text + 7px left / 5px right, centred with Mac's rounding
   down. That is only exact when (content width - panel width) is even:
   "Hami" is 32px, panel 44px, so the picture width must be EVEN. */
@font-face {
	font-family:"Chicago";
	src:url("../fonts/chicago.woff2") format("woff2");
	font-display:block;
}
/* LittleLink's reset is border-box; every size here is Mac content size. */
.mac7,
.mac7 *,
.mac7 *::before,
.mac7 *::after {
	box-sizing:content-box;
}
.mac7 {
	width:fit-content;
	margin:0 auto var(--spacing-l);
	border:1px solid #000;
	box-shadow:1px 1px 0 #000;
	background:#fff;
}
.mac7-bar {
	position:relative;
	height:17px;
	border-bottom:1px solid #000;
	background:
		repeating-linear-gradient(180deg, #777 0 1px, transparent 1px 2px) 1px 3px / calc(100% - 2px) 11px no-repeat,
		#eee;
	box-shadow:inset -1px -1px 0 #9999c8, inset 1px 1px 0 #ccccfb;
}
.mac7-close,
.mac7-zoom {
	position:absolute;
	top:3px;
	width:10px;
	height:10px;
	border-top:1px solid #333363;
	border-left:1px solid #333363;
	background:#ccccfb;
	box-shadow:0 0 0 1px #eee;
}
.mac7-close { left:8px; }
.mac7-zoom  { right:8px; }
.mac7-close::before,
.mac7-zoom::before {
	content:"";
	position:absolute;
	left:1px;
	top:1px;
	width:7px;
	height:7px;
	background:#aaa;
	border-right:1px solid #333363;
	border-bottom:1px solid #333363;
}
.mac7-zoom::after {
	content:"";
	position:absolute;
	left:1px;
	top:1px;
	width:4px;
	height:4px;
	border-right:1px solid #333363;
	border-bottom:1px solid #333363;
}
.mac7-title {
	position:absolute;
	left:0;
	right:0;
	top:1px;
	width:fit-content;
	height:15px;
	margin:0 auto;
	padding:0 5px 0 7px;
	background:#eee;
	color:#000;
	font:16px/16px "Chicago", monospace;
	letter-spacing:0;
	white-space:nowrap;
	-webkit-font-smoothing:none;
}
/* 1-bit bitmap (Hami's dithered frames, face-looker/processed/). 256px so
   a 2x screen shows the 512px bitmap dot for dot; 1x screens get a 256px
   re-dither. Nearest-neighbour always, so no dot is ever smoothed to grey.
   256 is even, so the title and info strip still centre exactly. */
.mac7-pic {
	display:block;
	width:256px;
	height:256px;
	image-rendering:pixelated;
}

/* Info strip under the picture: the Finder window header ("9 items /
   1,271.1 MB in disk / 726.9 MB available") moved to the bottom. Measured
   from a System 7 Finder window: a 1px black rule (the Finder's double rule
   reduced to one, so the photo runs straight onto it), then 17 white
   rows; Geneva 9 caps start 5 rows down. Left text 9px in, right text 5px
   in, middle centred (same even-width rule as the title).
   Geneva 9 is Kelsey Higham's FontStruct recreation (CC BY 3.0), with 't'
   raised by one pixel to match the real face; 64 units per Mac pixel, so
   16px. It has no multiplication sign, hence "x". */
@font-face {
	font-family:"Geneva 9";
	src:url("../fonts/geneva9.woff2") format("woff2");
	font-display:block;
}
.mac7-info {
	position:relative;
	height:17px;
	border-top:1px solid #000;
	background:#fff;
	color:#000;
	font:16px/16px "Geneva 9", Geneva, sans-serif;
	white-space:nowrap;
	-webkit-font-smoothing:none;
}
.mac7-info span {
	position:absolute;
	top:0;
}
.mac7-l { left:9px; }
.mac7-r { right:5px; }
.mac7-c {
	left:0;
	right:0;
	width:fit-content;
	margin:0 auto;
}

/* Custom brand buttons (not in LittleLink or Extended). Icons live in
   images/icons-custom/, made from the brand's own artwork in _assets/.
   MobyGames: the whale from their logo; background is the logo's teal. */
.button-mobygames {
	--button-text:#ffffff;
	--button-background:#07576d;
}
/* The whale is mid-blue, not white like the stock icons, so it needs more
   lift at rest to match their grey. */
.button-stack .button-mobygames:not(:hover):not(:focus-visible) .icon {
	filter:grayscale(1) brightness(1.35);
}

/* Bio: tighter leading than LittleLink's 1.6. */
.container p {
	line-height:1.35;
}

/* Title sits closer to the bio (stock gap is --spacing-m). */
h1 {
	margin-bottom:0.5rem;
}

/* Footer: smaller credit, with the legal line from the old holding page
   underneath. The year is rendered by Caddy (templates). */
footer {
	font-size:0.75rem;
	line-height:1.4;
}
footer .legal {
	margin:0.25rem 0 0;
	font-size:0.75rem;
	line-height:1.4;
}

/* Dragging the window (js/custom.js). The title bar takes the gesture
   instead of the page scroll, and the window sits above everything else
   wherever it is put. */
.mac7 {
	position:relative;
	z-index:10;
}
.mac7-bar {
	user-select:none;
	-webkit-user-select:none;
	touch-action:none;
}
/* System 7's drag outline: a 1px 50% grey dotted frame the size of the
   window, drawn by inverting what is under it (difference blend = XOR). */
.mac7-ghost {
	position:absolute;
	z-index:20;
	box-sizing:border-box;
	padding:1px;
	pointer-events:none;
	background:repeating-conic-gradient(#fff 0 25%, transparent 0 50%) 0 0 / 2px 2px;
	-webkit-mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	-webkit-mask-composite:xor;
	mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	mix-blend-mode:difference;
}