:root {
    --color-bg: #1f2a38;  /*dark blue bg*/
    --color-surface: #263548; /*slightly lighter panel*/
    --color-text: #eae3d2;  /*warmer body*/
    --color-heading: #f3ead9;  /*slightly brighter*/
    --color-accent: #d9a441; /*golden(ish) for links/highlights*/
    --color-accent-hover: #f0bc5e;
    --color-border: #3a4b63;
}

* {
    box-sizing: border-box;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: "Georgia", "Times New Roman", serif;
    font-size: 18px;
    line-height: 1.6;
    margin: 0;
    padding: 40px 8%;
}

/* Headings */

h1 {
    font-family: "trebuchet MS", "Verdana", sans-serif;
    color: var(--color-heading);
    font-size: 2.6em;
    font-weight: 700;
    margin-bottom: 0.2em;
    letter-spacing: 0.5px;
    border-bottom: 3px solid var(--color-accent);
    padding-bottom: 0.3em;
}

h2 {
    font-family: "Trebuchet MS", "Verdana", sans-serif;
    color: var(--color-accent);
    font-size: 1.6em;
    margin-top: 2em;
    margin-bottom: 0.6em;
}

h3 {
    font-family: "Trebuchet MS", "Verdana", sans-serif;
    color: var(--color-heading);
    font-size: 1.15em;
    margin: 0.4em 0;
}

p {
    margin: 0.5em 0;
    max-width: 65ch;
}

/* Links */

a {
    color: var(--color-accent);
    text-decoration: none;
    border-bottom: 1px solid var(--color-accent);
    transition: color 0.15s ease, border-color 0.15s ease;
}

a:hover,
a:focus {
    color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}

/*  Intro table */

.intro-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
}

.into-photo img {
    border-radius: 6px;
    border: 2px solid var(--color-border);
    display: block;
}

/* Placeholder box until real photos added,
    can delete once swap in actual <img> tags */

.placeholder-img {
    background-color: var(--color-surface);
    border: 2px dashed var(--color-border);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--color-border);
    font-family: "Trebuchet MS", "Verdana", sans-serif;
    font-size: 0.9em;
}

.intro-info {
    padding-left: 40px;
}

.intro-info p {
    margin: 0.4em 0;
    font-size: 1.05em;
}

/* Bio section */

.bio {
    background-color: var(--color-surface);
    border-left: 4px solid var(--color-accent);
    padding: 20px 30px;
    border-radius: 4px;
}

/* interests section */

.interests-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1em;
}

.interests-table tr {
    border-bottom: 1px solid var(--color-border);
}

.interests-table td {
    vertical-align: top;
    padding: 18px 14px;
}

.interest-image img {
    border-radius: 6px;
    border: 2px solid var(--color-border);
    display: block;
}

.interest-image .placeholder-img {
    margin: 0 auto;
}

.interest-desc p {
    font-size: 0.95em;
    max-width: 32ch;
}

.interest-links a {
    display: inline-block;
    margin-bottom: 6px;
}

/* responsive: stack columns on small screens */

@media (max-width: 700px) {
    .intro-table tr,
    .interests-table tr {
        display: block;
    }

    .intro-table td,
    .interests-table td {
        display: block;
        width: 100%;
        padding: 12px 0;
    }

    .intro-info {
        padding-left: 0;
    }
}