body {
    font-family: Georgia, serif;
    display: flex;
    min-height: 80vh; /* Changed from height: 100vh */
    margin: 0;
    padding: 2rem 1.5rem; /* Prevents text from hitting screen edges */
    position:relative;
}
main {
    margin: auto;
    max-width: min(70vw, 580px) ; /* Prevents lines from stretching too wide on desktop */
    font-size: 1.2rem;
}
dt {
    margin: 2em 0 0.5em 0;
    font-weight: bold;
    font-style: italic;
}

/* 1. Reset default browser indentation on dd */
dd {
    line-height:1.8rem;
}

/* 2. Style the photo for desktop */
.biopic {
    float: right;
    max-width: 144px;
    border-radius: 8px; /* Optional: gives a clean modern finish */
    margin: 0 0 1rem 1.5rem;
	border:1px solid red;
}

/* 3. Mobile responsiveness (screens narrower than 600px) */
@media (max-width: 900px) {
    main {
        max-width: 100%;
        font-size: 1.1rem;
    }
    
    .biopic {
        float: none;
        display: block;
        margin: 1rem auto 1.5rem auto;
        max-width: 160px;
	border:1px solid red;
    }

    /* Makes the button easy to tap with one thumb */
    .btn {
        display: block;
        text-align: center;
        margin: 1.25rem 0;
    }
}


.xl {
    font-size: 2em;
    font-style: normal;
}
.sigil {
    font-size:2rem;
}
.biopic {
	float:right;
	max-width:144px;
}
.by {
	text-align:right;
}
ul {
    padding: 0;
}
h3 {
    position: absolute;
    margin: 0.1rem 0.25rem;
}
li.xs {
    font-size:0.7em;
    padding: 0.4rem 0 0 0;
}
li {
	margin: 0.25rem 0;
}
.greyline {
 	color: #ddd;
	margin:2rem 0;
}

.btn { display: inline-block; background: #38bdf8; color: #0f172a; text-decoration: none; font-weight: bold; padding: 0.75rem 1.5rem; border-radius: 8px; margin-bottom: 0.75rem; }