/* The mortell.info dark identity — water.css overrides carried over from
   mortell-info/lib/layout.php, completed to the FULL water.css token set so no
   light-theme value leaks through onto the dark background. */
:root {
	--background-body: #202020;
	--background: #303030;
	--background-alt: #282828;
	--selection: hsla(158, 93%, 40%, 0.35);
	--text-main: #b0b0b0;
	--text-bright: #ffffff;
	--text-muted: #7d7d7d;
	--links: hsl(158, 93%, 40%);
	--focus: hsla(158, 93%, 40%, 0.35);
	--border: #444444;
	--code: #ffbe85;
	--button-base: #3a3a3a;
	--button-hover: #4a4a4a;
	--scrollbar-thumb: #454545;
	--scrollbar-thumb-hover: #555555;
	--form-placeholder: #7d7d7d;
	--form-text: #ffffff;
	--variable: #4dd0a5;
	--highlight: hsla(158, 93%, 40%, 0.25);

	--accent: hsl(158, 93%, 40%);
	--font-display: "Sono", ui-monospace, monospace;
}

textarea,
input:not([type="checkbox"]):not([type="file"]):not([type="image"]):not([type="radio"]):not([type="range"]) {
	font: inherit;
	letter-spacing: inherit;
	word-spacing: inherit;
}

body {
	max-width: 1265px;        /* x.com's desktop frame; water.css default is a narrow 800px */
	/* faint green glow at the top of the page — atmosphere, not decoration */
	background-image: radial-gradient(60rem 14rem at 50% -6rem, hsla(158, 93%, 40%, 0.07), transparent 70%);
	background-repeat: no-repeat;
}

/* prose shouldn't stretch to 1265px — grids and maps use the full width */
.projects { max-width: 64rem; }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 500;
	letter-spacing: -0.02em;
}

.flex {
	display: flex;
	justify-content: space-between;
}

/* --- site header / nav ------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 10;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding: 0.7rem 0 0.6rem;
	margin: 0 0 1.5rem;
	background: hsla(0, 0%, 13%, 0.82);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--border);
}
.site-header .brand {
	font-family: var(--font-display);
	font-size: 1.05rem;
	color: var(--text-bright);
	text-decoration: none;
}
.site-header .brand::before {
	content: "~/";
	color: var(--accent);
	margin-right: 0.15em;
}
.site-header nav {
	display: flex;
	gap: 1.1rem;
	font-family: var(--font-display);
	font-size: 0.85rem;
}
.site-header nav a {
	color: var(--text-main);
	text-decoration: none;
	padding-bottom: 0.15em;
	border-bottom: 2px solid transparent;
}
.site-header nav a:hover { color: var(--text-bright); }
.site-header nav a.active {
	color: var(--text-bright);
	border-bottom-color: var(--accent);
}

/* --- home hero ---------------------------------------------------------- */
.hero { margin: 2.5rem 0 2rem; }
.hero h1 {
	font-size: 2.6rem;
	margin: 0 0 0.3rem;
}
.hero .roles {
	font-family: var(--font-display);
	font-size: 0.9rem;
	color: var(--accent);
	letter-spacing: 0.04em;
	margin: 0 0 1rem;
}
.hero .blurb { max-width: 38rem; }

.social {
	display: flex;
	gap: 1.25rem;
	font-family: var(--font-display);
	font-size: 0.85rem;
	padding: 0;
	list-style: none;
}

/* --- home photo strip ---------------------------------------------------- */
.photo-strip {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0.4rem;
	margin: 1.2rem 0;
}
.photo-strip a {
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 6px;
}
.photo-strip img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.25s;
}
.photo-strip a:hover img { transform: scale(1.05); }

/* --- section cards ------------------------------------------------------ */
.cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 0.9rem;
	margin: 1.5rem 0;
}
.cards a {
	display: block;
	padding: 0.9rem 1rem 1rem;
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--background-alt);
	text-decoration: none;
	color: var(--text-main);
	transition: border-color 0.15s, transform 0.15s;
}
.cards a:hover {
	border-color: var(--accent);
	transform: translateY(-2px);
}
.cards h3 {
	margin: 0 0 0.3rem;
	font-size: 1rem;
	color: var(--text-bright);
}
.cards p { margin: 0; font-size: 0.85rem; }
.cards .soon {
	font-family: var(--font-display);
	font-size: 0.7rem;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* --- gallery ------------------------------------------------------------ */
.crumbs {
	font-family: var(--font-display);
	font-size: 0.8rem;
	color: var(--text-muted);
	margin: 0.5rem 0 0;
}
.crumbs a { color: var(--text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--links); }

.album-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	gap: 0.9rem;
	margin: 1rem 0 2rem;
}
.album-grid a {
	position: relative;
	display: block;
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid var(--border);
	text-decoration: none;
	color: var(--text-main);
	background: var(--background-alt);
	transition: border-color 0.15s, transform 0.15s;
}
.album-grid a:hover { border-color: var(--accent); transform: translateY(-2px); }
.album-grid figure { margin: 0; aspect-ratio: 3 / 2; }
.album-grid img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
.album-grid h3, .album-grid p {
	position: absolute;
	left: 0; right: 0;
	margin: 0;
	padding: 0.15rem 0.7rem;
	z-index: 1;
}
.album-grid h3 {
	bottom: 1.35rem;
	font-size: 0.95rem;
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}
.album-grid p {
	bottom: 0.25rem;
	font-size: 0.72rem;
	color: #d5d5d5;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
.album-grid a::after {              /* gradient overlay so titles stay readable */
	content: "";
	position: absolute;
	inset: 50% 0 0 0;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.75));
}

.photo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
	grid-auto-rows: 11rem;
	grid-auto-flow: dense;
	gap: 0.4rem;
	margin: 1rem 0 2rem;
}
.photo-grid a {
	display: block;
	overflow: hidden;
	border-radius: 4px;
}
.photo-grid img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
	aspect-ratio: auto !important;   /* cells are fixed-height; ratio attr is for lightbox */
	transition: transform 0.25s, filter 0.25s;
}
.photo-grid a:hover img { transform: scale(1.04); filter: brightness(1.1); }

/* phones: square 3-up like iPhone Photos, tight gaps; album cards 2-up */
@media (max-width: 640px) {
	.photo-grid {
		grid-template-columns: repeat(3, 1fr);
		grid-auto-rows: unset;
		gap: 2px;
	}
	.photo-grid a { aspect-ratio: 1; border-radius: 0; }
	.album-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
	.album-grid h3 { font-size: 0.8rem; }
	.album-grid p { font-size: 0.65rem; }
}
.flex h2 { margin-bottom: 0.3rem; }
.map-link { align-self: center; font-family: var(--font-display); font-size: 0.85rem; text-decoration: none; }
.photo-map { height: 480px; }
.photo-pin img {
	width: 44px; height: 44px;
	object-fit: cover;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.leaflet-popup-content a { text-decoration: none; }
#slideshow { align-self: center; font-size: 0.85rem; }
#bp {                       /* bigger-picture mount point: full viewport, inert when closed */
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 100;
}
#bp > * { pointer-events: auto; }

/* --- development portfolio ---------------------------------------------- */
.cg-card {
	display: flex;
	align-items: center;
	gap: 1rem;
	border: 1px solid var(--border);
	border-left: 3px solid var(--accent);
	border-radius: 8px;
	background: var(--background-alt);
	padding: 0.7rem 1.1rem;
	margin: 1rem 0;
	text-decoration: none;
	color: var(--text-main);
}
.cg-card:hover { border-color: var(--accent); }
.cg-rank {
	font-family: var(--font-display);
	font-size: 2rem;
	color: var(--accent);
}
.cg-detail { line-height: 1.35; }
.cg-detail small { color: var(--text-muted); }

.projects { margin: 1.5rem 0; }
.project {
	padding: 1.1rem 0 0.9rem;
	border-bottom: 1px solid var(--border);
}
.project h3 { margin: 0; font-size: 1.1rem; }
.project .year {
	font-family: var(--font-display);
	color: var(--accent);
	font-size: 0.85rem;
}
.project .tags { margin: 0.2rem 0 0.5rem; }
.project .tags span {
	font-family: var(--font-display);
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--text-muted);
	border: 1px solid var(--border);
	border-radius: 999px;
	padding: 0.1em 0.6em;
	margin-right: 0.35em;
}
.project img {
	border-radius: 5px;
	max-width: 320px;
	max-height: 140px;
	width: auto;
	float: right;
	margin: 0 0 0.5rem 1rem;
}
.project .text { overflow: hidden; }
.project .text p { margin: 0.4rem 0; }
.project button.edit {
	background: none;
	border: none;
	color: var(--text-muted);
	cursor: pointer;
	padding: 0 0.3em;
	font-size: 0.9rem;
}
.project button.edit:hover { color: var(--accent); }

dialog {
	background: var(--background-alt);
	color: var(--text-main);
	border: 1px solid var(--border);
	border-radius: 8px;
	width: min(40rem, 92vw);
}
dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
/* fields fill the dialog; selector matches water.css's specificity so it wins */
dialog textarea,
dialog select,
dialog input:not([type="checkbox"]):not([type="radio"]) {
	width: 100%;
	box-sizing: border-box;
}
dialog label { display: block; }
dialog p.flex { gap: 0.8rem; }
dialog p.flex label { flex: 1; }
dialog p.flex span { display: flex; gap: 0.5rem; align-items: center; }
dialog p.flex span button { width: auto; }
dialog .danger { background: #5a2626; color: #f0c0c0; }

/* --- travel ------------------------------------------------------------- */
[hidden] { display: none !important; }   /* water.css's details{display:block} beats the UA rule */

.travel details {
	border: 1px solid var(--border);
	border-radius: 8px;
	background: var(--background-alt);
	padding: 0.4rem 0.9rem;
	margin: 0.5rem 0;
}
.travel summary {
	cursor: pointer;
	font-family: var(--font-display);
	color: var(--text-bright);
	padding: 0.25rem 0;
}
.travel summary small { color: var(--text-muted); font-family: var(--font-display); }
.travel ul { margin: 0.3rem 0 0.5rem; padding-left: 1.2rem; }
.travel li { margin: 0.25rem 0; }
.travel .place { color: var(--text-bright); }
.travel .desc { color: var(--text-muted); font-size: 0.9em; }
.travel li.note, .travel-note { color: var(--text-muted); font-size: 0.9em; }
.travel-line { margin: 0.4rem 0 0.4rem 0.9rem; }
.travel-note { margin: 0.4rem 0 0.4rem 0.9rem; }
a.tlink {
	text-decoration: none;
	font-size: 0.85em;
	margin-left: 0.15em;
	opacity: 0.8;
}
a.tlink:hover { opacity: 1; }
a.tpin { text-decoration: none; font-size: 0.8em; opacity: 0.7; }
a.tpin:hover { opacity: 1; }
.travel button.edit, .travel-line button.edit, .travel-note button.edit {
	background: none;
	border: none;
	color: var(--text-muted);
	cursor: pointer;
	padding: 0 0.25em;
	font-size: 0.85rem;
	visibility: hidden;
}
.editable li:hover > button.edit, .editable summary:hover > button.edit,
.travel-line:hover > button.edit, .travel-note:hover > button.edit,
.editable p:hover > button.edit { visibility: visible; }
.travel button.edit:hover { color: var(--accent); }
.rate { white-space: nowrap; }
.rate button {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0 0.08em;
	font-size: 0.85rem;
	color: var(--text-muted);
}
.rate .fav[data-on="1"] { color: gold; }
.rate .stars { visibility: hidden; }
li:hover > .rate .stars { visibility: visible; }
.rate .stars button.on { color: var(--accent); }
.rate .stars button:hover { color: var(--text-bright); }
.rate .avg { color: var(--text-muted); font-size: 0.75rem; margin-left: 0.2em; }
label.favonly { font-size: 0.85rem; color: var(--text-muted); margin-right: 0.6em; }
label.favonly input { margin-right: 0.2em; }
.cbtn {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 0.75rem;
	color: var(--text-muted);
	padding: 0 0.2em;
}
.cbtn:hover { color: var(--text-bright); }
.cpanel {
	border-left: 2px solid var(--border);
	margin: 0.4rem 0 0.4rem 0.3rem;
	padding: 0.2rem 0.8rem;
	font-size: 0.85rem;
}
.cpanel p { margin: 0.3rem 0; }
.cpanel .cdel { background: none; border: none; color: var(--text-muted); cursor: pointer; }
.cpanel .cdel:hover { color: #e66; }
.cform { display: flex; gap: 0.5rem; align-items: flex-end; margin-top: 0.5rem; }
.cform textarea { flex: 1; }
#map {
	height: 420px;
	border: 1px solid var(--border);
	border-radius: 8px;
	margin: 1rem 0;
	z-index: 0;               /* stay under the sticky site header */
	position: relative;
}
#map::after {                /* hint until wheel zoom is activated by a click */
	content: "click map to enable scroll zoom";
	position: absolute;
	right: 8px; bottom: 8px;
	z-index: 500;
	font-family: var(--font-display);
	font-size: 0.65rem;
	color: #333;
	background: rgba(255, 255, 255, 0.75);
	padding: 0.1em 0.5em;
	border-radius: 4px;
	pointer-events: none;
}
#map.wheel-on::after { content: ""; background: none; }
.leaflet-popup-content a.tlink { font-size: 1em; }
.tphotos { display: block; margin: 0.3rem 0; }
img.tphoto {
	max-width: 260px;
	max-height: 160px;
	width: auto;
	border-radius: 6px;
	margin-right: 0.4rem;
}

/* --- footer ------------------------------------------------------------- */
.site-footer {
	margin-top: 3rem;
	padding: 1rem 0 0.5rem;
	border-top: 1px solid var(--border);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.5rem;
	font-size: 0.8rem;
	color: var(--text-muted);
}
.site-footer a { color: var(--text-muted); }
.site-footer a:hover { color: var(--links); }