@import url("https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,500;0,600;1,500;1,600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Ubuntu+Mono&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');

html { 
    scroll-behavior: smooth; 
}

body { 
    background-color: #fff; 
    padding: 0px; 
    font: 17px/1.72 "Crimson Pro", serif; 
    color: #3a3a3a; 
    font-weight: 400; 
    margin: 0; 
}

.pub-row { 
    display: flex; 
    align-items: center; 
}

.social-icons a { 
    display: inline-block; 
    height: 2.4rem; 
    width: 2.4rem; 
    background-color: transparent; 
    color: #13294B !important; 
    border-radius: 100%; 
    text-align: center; 
    font-size: 1.15rem; 
    line-height: 2.5rem; 
    margin-right: 0.9rem; 
    transition: color 0.2s ease, transform 0.25s ease; 
}

.social-icons a:last-child { 
    margin-right: 0; 
}

.social-icons a:hover { 
    background-color: transparent; 
    color: #0066cc !important; 
    transform: translateY(-4px); 
}

.icon-button { 
    background-color: white; 
    border-radius: 3.6rem; 
    cursor: pointer; 
    display: inline-block; 
    font-size: 2.0rem; 
    height: 3.6rem; 
    line-height: 3.6rem; 
    margin: 0 5px; 
    position: relative; 
    text-align: center; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
    width: 3.6rem; 
}

.icon-button span { 
    border-radius: 0; 
    display: block; 
    height: 0; 
    left: 50%; 
    margin: 0; 
    position: absolute; 
    top: 50%;
    -webkit-transition: all 0.3s; 
    -moz-transition: all 0.3s; 
    -o-transition: all 0.3s; transition: all 0.3s; 
    width: 0; 
}

.icon-button:hover span { 
    width: 3.6rem; 
    height: 3.6rem; 
    border-radius: 3.6rem; 
    margin: -1.8rem; 
}

.twitter span { 
    background-color: #4099ff; 
}

.facebook span { 
    background-color: #4286f4; 
}

.linkedin span { 
    background-color: #0077B5; 
}

.github span { 
    background-color: #000; 
}

header email:first-of-type {
    margin-top: 10px;
}

email {
    display: block;
    font-size: 13px;
    font-family: "Ubuntu Mono";
    color: #666;
    margin-top: 0px; 
}

email + email {
    margin-top: 0px;
}

.social-icons {
    margin-top: 20px;
}

/* 3. Mobile Spacing (Restores the exact spacing you liked on your iPhone) */
@media screen and (max-width: 960px) {
    header position {
        margin-top: 4px;
        margin-bottom: 2px;
    }
    header > a:not(.avatar) {
        margin-bottom: 6px;
    }
    email {
        margin-top: 2px;
    }
    .social-icons {
        margin-top: 10px;
    }
}

.icon-button i { 
    background: none; 
    color: white; 
    height: 3.6rem; 
    left: 0; 
    line-height: 3.6rem; 
    position: absolute; 
    top: 0; 
    -webkit-transition: all 0.3s; 
    -moz-transition: all 0.3s; 
    -o-transition: all 0.3s; 
    transition: all 0.3s; 
    width: 3.6rem; 
    z-index: 10; 
}

.icon-button .icon-twitter { 
    color: #4099ff; 
}

.icon-button .icon-facebook { 
    color: #4286f4; 
}

.icon-button .icon-github { 
    color: #000; 
}

.icon-button .icon-linkedin { 
    color: #0077B5; 
}

.icon-button:hover .icon-twitter, .icon-button:hover .icon-facebook, .icon-button:hover .icon-github, .icon-button:hover .icon-linkedin { 
    color: white; 
}

autocolor { 
    color: #5a5a5a; 
}

lightonly { 
    visibility: visible; 
}

darkonly { 
    visibility: hidden; 
}

education { 
    font-weight: 500; font-size: 115%; 
}

papertitle { 
    font-weight: 600; font-size: 100%; 
}

position { 
    font-size: 1.05rem; color: #555; display: block; 
}

.image { 
    border-radius: 0.35em;
    border: 0; 
    display: inline-block; 
    position: relative; 
}

.image:before { 
    -moz-transition: opacity 0.2s ease-in-out; 
    -webkit-transition: opacity 0.2s ease-in-out; 
    -ms-transition: opacity 0.2s ease-in-out; 
    transition: opacity 0.2s ease-in-out; 
    border-radius: 0.35em; content: ''; 
    display: block; 
    height: 100%; 
    left: 0; 
    opacity: 0.5; 
    position: absolute; 
    top: 0; 
    width: 100%; 
}

.image.avatar img {
    border-radius: 100%;
    width: 200px;
    height: 200px;
    padding: 10px;
    border: 4px solid #d0d0d0;
    object-fit: cover;
    object-position: center top;
}

h3, h4, h5, h6 { 
    font-weight: 600; 
    color: #13294B; 
    margin: 0 0 16px; 
}

h1 { 
    font-weight: 600; 
    color: #13294B; 
    margin: 0 0 5px; 
    font-size: 1.55rem; 
    letter-spacing: -0.01em; 
}

h2 { 
    color: #13294B; 
    font-weight: 600; 
    margin: 52px 0px 14px; 
    font-size: 1.5rem; 
    padding-bottom: 9px; 
    border-bottom: 1.5px solid rgba(19,41,75,0.15); 
    letter-spacing: 0.005em; 
}

p, ul, ol, table, pre, dl { 
    margin: 0 0 20px; 
}

h1, h2, h3 { 
    line-height: 1.2; 
}

a { 
    color: #0055a5; 
    text-decoration: none; 
    transition: color 0.15s ease; 
}

a:hover { 
    color: #13294B; 
}

a small { 
    font-size: 11px; 
    color: #777; 
    margin-top: -0.3em; 
    display: block; 
}

a:hover small { 
    color: #777; 
}

.wrapper { 
    width: 960px; margin: 0 auto; 
}

blockquote { 
    border-left: 3px solid rgba(19,41,75,0.25); 
    margin: 0 0 20px; 
    padding: 6px 0 6px 18px; 
    font-style: italic; 
    color: #555; }

code, pre { 
    font-family: Monaco, Bitstream Vera Sans Mono, Lucida Console, Terminal, Consolas, Liberation Mono, DejaVu Sans Mono, Courier New, monospace; 
    color: #333; }

pre { 
    max-width: 500px; 
    padding: 8px 15px; 
    background: #f8f8f8; 
    border-radius: 5px; 
    border: 1px solid #e5e5e5; 
    overflow-x: auto; 
}

table { 
    width: 100%; 
    border-collapse: collapse; 
}

th, td { 
    text-align: left; 
    padding: 5px 10px; 
    border-bottom: 1px solid #e5e5e5; 
}

dt { 
    color: #444; font-weight: 500; 
}

th { 
    color: #444; 
}

img { 
    max-width: 100%; 
}

header { 
    width: 242px; 
    float: left; 
    position: fixed; 
    -webkit-font-smoothing: subpixel-antialiased; 
    padding-top: 5.2em; 
    text-align: center; 
}

header ul { 
    list-style: none; 
    height: 40px; 
    padding: 0; 
    background: #f4f4f4; 
    border-radius: 5px; 
    border: 1px solid #e0e0e0; 
    width: 270px; 
}

header li { 
    width: 89px; 
    float: left; 
    border-right: 1px solid #e0e0e0; 
    height: 40px; 
}

header li:first-child a { 
    border-radius: 5px 0 0 5px; 
}

header li:last-child a { 
    border-radius: 0 5px 5px 0;
 }

header ul a { 
    line-height: 1; 
    font-size: 11px; 
    color: #999; 
    display: block; 
    text-align: center; 
    padding-top: 6px; 
    height: 34px; }

header ul a:hover { 
    color: #999; 
}

header ul a:active { 
    background-color: #f0f0f0; 
}

strong { 
    color: #1a1a1a; 
    font-weight: 600; 
}

header ul li + li + li { 
    border-right: none; 
    width: 89px; 
}

header ul a strong { 
    font-size: 14px; 
    display: block; 
    color: #222; 
}

.sidebar-divider { 
    border: none;
    border-top: 1px solid rgba(19,41,75,0.1); 
    margin: 14px auto; 
    width: 60%; }

section { 
    width: 662px; 
    float: right; 
    padding-top: 90px; 
    padding-bottom: 56px; 
}

section ul li { 
    margin-bottom: 7px; line-height: 1.62; 
}

section p { 
    line-height: 1.78; 
}

small { 
    font-size: 11px; 
}

hr { 
    border: 0; 
    background: #e5e5e5; 
    height: 1px; 
    margin: 0 0 20px; 
}

footer { 
    width: 242px; float: left; position: fixed; bottom: 30px; -webkit-font-smoothing: subpixel-antialiased; text-align: center; }

@media print, screen and (max-width: 960px) { 
    .pub-row { display: flex; align-items: center; } div.wrapper { width: auto; margin: 0; } header, section, footer { float: none; position: static; width: auto; } header { padding-top: 80px; } section { border: none; border-top: 1px solid #e5e5e5; padding: 20px 0; margin: 0 0 20px; } header a small { display: inline; } header ul { position: absolute; right: 50px; top: 52px; } .image.avatar img { border-radius: 100%; width: 150px; height: 150px; padding: 4px; border: 2px solid #d0d0d0; box-shadow: 0 4px 16px rgba(19, 41, 75, 0.16); object-fit: cover;} section { padding:20px 20px } section.simple-page { padding-top: 65px; }}

@media print, screen and (max-width: 960px) { 
    body { word-wrap: break-word; padding: 0px; } .pub-row { display: flex; align-items: center; } pre, code { word-wrap: normal; } }

@media print, screen and (max-width: 480px) { 
    .pub-row { display: block; align-items: center; } body { padding: 0px; } header ul { width: 99%; } header li, header ul li + li + li { width: 33%; } .image.avatar img { border-radius: 100%; width: 125px; height: 125px; padding: 5px; border: 2px solid #d0d0d0; box-shadow: 0 4px 16px rgba(19, 41, 75, 0.16); object-fit: cover;} }

@media print { 
    body { 
        padding: 0.4in; 
        font-size: 12pt; 
        color: #444; 
    } 
}

.news-list li { 
    font-size: 0.92em; 
    line-height: 1.58; 
    margin-bottom: 6px; 
}

.textsectionheader2 { 
    font-size: 0.82em; 
    font-weight: 700; 
    color: #13294B; 
    margin: 28px 0 7px; 
    letter-spacing: 0.06em; 
    text-transform: uppercase; 
}

.papericon { 
    border: 1.5px solid #13294B; 
    border-radius: 6px; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.18); 
}

.member-card { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    text-align: center; 
    padding: 14px 8px 12px; 
    border-radius: 10px; 
    transition: background-color 0.2s ease, box-shadow 0.2s ease; 
}

.member-card:hover { 
    background-color: #f5f7fa; 
    box-shadow: 0 4px 14px rgba(19,41,75,0.12); 
}

.member-card a { 
    font-weight: 600; 
}

.memberrole { 
    font-size: 9pt; 
    color: #666; 
    line-height: 1.2; 
    margin-top: 3px; 
}

.memberrole-line { 
    display: block; 
    line-height: 1.2; 
}

.group-link { 
    display: inline-block; 
    margin-bottom: 24px; 
    font-family: 'Ubuntu Mono', monospace; 
    font-size: 0.85rem; 
    color: #13294B; 
    border: 1px solid #13294B; 
    border-radius: 5px; 
    padding: 4px 12px; 
    text-decoration: none; 
    transition: background-color 0.2s ease, color 0.2s ease; 
}

.group-link:hover { 
    background-color: #13294B; 
    color: #fff !important; 
    text-decoration: none; 
}

.alumni-list { 
    display: flex; 
    flex-direction: column; 
    gap: 2px; 
    margin-top: 8px; 
    margin-bottom: 24px; 
}

.alumni-entry { 
    padding: 5px 0; font-size: 1em; 
}

.alumni-entry .alumni-role { 
    font-size: 9pt; 
    color: #666; 
}

.biblink { 
    text-decoration: none; 
    display: inline; 
    margin-right: 0px; 
}

.fakelink { 
    text-decoration: none; 
    cursor: pointer; 
}

.bibref { 
    font-size: 70%;
    margin-top: 10px; 
    margin-left: 0px; 
    display: none; 
    font-family: monospace; 
}

.contact-list { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
}

.contact-list li { 
    margin-bottom: 8px; 
    line-height: 1.62; 
}

.contact-list li:last-child { 
    margin-bottom: 0; 
}

.contact-list i { 
    color: #13294B; 
    margin-right: 7px; 
}

/* Two-Column News Section */
ul.news-list {
  list-style: none;
  padding-left: 0;
  margin-top: 12px;
}

ul.news-list li {
  display: grid;
  grid-template-columns: 100px 1fr; /* 110px column for dates, remaining space for text */
  column-gap: 12px;
  margin-bottom: 8px;
  font-size: 1em;
  line-height: 1.58;
}

.news-date {
  font-weight: 600;
  color: inherit;
  white-space: nowrap;
}

.news-text {
  color: inherit;
}

/* Ensure the 'Show more' button spans the full width */
ul.news-list li.news-toggle {
  display: block;
  margin-top: 6px;
  margin-right: 1fr;
}

/* PDF link */
.pdf-link {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 24px;
    margin-top: 50px;
    margin-bottom: -15px;
    padding: 0;
}

.pdf-icon {
    width: 45px;
    display: block;
}

/* CV layout styles */
.cv-entry {
    display: grid;
    grid-template-columns: 160px 1fr;
    column-gap: 25px;
    margin-bottom: 25px; }

.cv-date {
    font-style: italic; }

.cv-description {
    min-width: 0; }

@media screen and (max-width: 600px) {
    .cv-entry {
        grid-template-columns: 1fr;
        row-gap: 5px;}

    .cv-date {
        font-size: 0.95em;}
}