* {margin:0; padding:0; box-sizing:border-box;}

html {-webkit-text-size-adjust:100%; text-size-adjust:100%;}

/* General styles */
body {
    background:#fff url(images/background.jpg) top center no-repeat;
    color:#303030;
    font:84% Helvetica, Tahoma, sans-serif;
    line-height:1.4em;
}

a {color:#2a5a7a; text-decoration:none;}
a:hover {text-decoration:underline;}

p, ul, ol, dl {margin:0 0 20px 0;}
ul {padding-left:1em;}

h1, h2, h3 {
    font-weight:400;
    line-height:1em;
    font-family:Georgia, serif;
}

h1 {color:#2a5a7a; font-size:3.2em;}
h1 a {color:#2a5a7a; text-transform:none;}
h1 a:hover {text-decoration:none;}

h2 {
    font-size:2.2em;
    color:#2a5a7a;
    margin:0 0 10px;
    border-bottom:2px solid #eee;
}

h3 {font-size:1.6em; color:#2a5a7a; margin:0 0 10px 0;}

/* Shared layout constants */
:root {
    --site-width:960px;

    /*
      Initial guess only; header.js measures the real rendered header height
      once the banner image loads and overwrites this value to match exactly.
    */
    --desktop-fixed-header-height:300px;
    --desktop-fixed-title-height:48px;

    --desktop-sidebar-container-width:240px;
    --desktop-sidebar-content-width:220px;
    --desktop-content-offset:240px;

    --mobile-header-height:54px;

    /* Initial guess only; header.js measures the real rendered banner height (see #banner img). */
    --mobile-banner-height:120px;

    /*
      Initial guess only; site/pubs-toolbar.js measures the real
      rendered height of .sticky-header (Publications pages only) and
      overwrites this so the sticky <h3> below it lands with no gap.
    */
    --sticky-header-height:170px;
}

/* Main container */
#width960 {
    width:var(--site-width);
    max-width:100%;
    margin:0 auto 20px auto;
    padding-top:calc(var(--desktop-fixed-header-height) + 20px);
}

/* Fixed header/banner */
#header-container {
    position:fixed;
    top:0;
    left:50%;
    transform:translateX(-50%);
    width:var(--site-width);
    max-width:100%;
    z-index:1000;
    background:#ffffff;
}

#banner img {display:block; width:100%; height:auto;}

/* Hide mobile header on desktop */
.mobile-header {display:none;}

/* Footer */
#footer .col {
    text-align:right;
    color:#333;
    font-size:0.9em;
    border-top:2px solid #eee;
    padding:10px 0;
}

#footer-container {clear:both;}

/* Grid classes, fixed width, 960px with 12 columns */
.col {float:left; margin:0 10px; display:inline;}
.col img {max-width:100%; height:auto;}

/* Keeps embeds (e.g. the calendar.html Google Calendar iframe) from forcing horizontal overflow on narrow screens. */
.embed-responsive {width:600px; max-width:100%;}

.row {
    width:var(--site-width);
    max-width:100%;
    margin:0 auto;
}

/*
  Clearfix for floated .col children. Not overflow:hidden: that clips and
  silently breaks position:sticky on any descendant (e.g. #content > h2).
*/
.row::after {
    content:"";
    display:table;
    clear:both;
}

.row .row {
    margin:0 -10px;
    width:auto;
    display:inline-block;
}

.c1 {width:60px;}
.c2 {width:140px;}
.c3 {width:220px;}
.c4 {width:300px;}
.c5 {width:380px;}
.c6 {width:460px;}
.c7 {width:540px;}
.c8 {width:620px;}
.c9 {width:700px;}
.c10 {width:780px;}
.c11 {width:860px;}
.c12 {width:940px;}

/* Menu list style */
ul.menu {
    list-style:none;
    margin:0;
    padding:10px 0 0;
}

ul.menu li {
    list-style:none;
    font-size:1em;
    margin:0 0 4px;
    padding:0 0 4px 0;
}

ul.menu li a {
    font-size:1.4em;
    font-family:Georgia, serif;
}

/*
  Publications pages category menu. Multi-word labels line-break between
  words in the HTML (e.g. "Journal<br>Papers") so each button stays as
  narrow as its longest word, letting the whole row fit on one line.
*/
.pub-menu {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:2px;
    margin:10px 0 16px 0;
}

.pub-menu a {
    display:flex;
    align-items:center;
    justify-content:center;
    height:40px;
    padding:0 8px;
    border:1px solid #dddddd;
    border-radius:4px;
    background:#ffffff;
    color:#2a5a7a;
    font-family:Helvetica, Tahoma, sans-serif;
    font-size:0.9em;
    line-height:1.15;
    text-align:center;
    text-decoration:none;
}

.pub-menu a:hover {
    background:#f7f7f7;
    text-decoration:none;
}

/* Desktop: keep sidebar fixed in the viewport during scrolling */
@media screen and (min-width:1001px) {
    #sidebar-container {
        position:fixed;
        top:calc(var(--desktop-fixed-header-height) + var(--desktop-fixed-title-height) + 20px);
        left:50%;
        transform:translateX(calc(var(--site-width) / -2));
        width:var(--desktop-sidebar-container-width);
        max-height:calc(100vh - var(--desktop-fixed-header-height) - var(--desktop-fixed-title-height) - 40px);
        overflow-y:auto;
        z-index:900;
    }

    #sidebar-container #sidebar {
        width:var(--desktop-sidebar-content-width) !important;
        margin:0 10px;
    }

    /*
      Since the fixed sidebar is removed from normal document flow,
      reserve the left column for it manually.
    */
    #content {
        margin-left:var(--desktop-content-offset);
    }

    /*
      Sticky (not fixed): each section h2 stays in normal flow and only
      sticks once scrolled to the header's bottom edge. On pages with
      multiple h2s, the next one naturally replaces the previous as you
      scroll past it, instead of only the first h2 ever being pinned.
    */
    #content > h2 {
        position:sticky;
        top:var(--desktop-fixed-header-height);
        z-index:950;
        background:#ffffff;
        padding-top:10px;
    }

    /*
      Same sticky technique as #content > h2, but for pages (e.g. Publications)
      that also want a toolbar/legend block pinned below the header. h2 loses
      its own > h2 match here since it's nested inside .sticky-header, not a
      direct child of #content, so the two rules never both apply to the same h2.
    */
    #content > .sticky-header {
        position:sticky;
        top:var(--desktop-fixed-header-height);
        z-index:950;
        background:#ffffff;
        padding-top:10px;
        overflow:hidden;
    }

    /*
      Stacks directly below .sticky-header: same top for every h3, so (like
      the h2 stacking above) whichever section you've scrolled into simply
      replaces the previous one, keeping the h2 title bar visible above it.
    */
    #content > .sticky-subheading {
        position:sticky;
        top:calc(var(--desktop-fixed-header-height) + var(--sticky-header-height));
        z-index:940;
        background:#ffffff;
        margin-bottom:0;
        padding-top:8px;
        padding-bottom:20px;
    }
}

/* Only collapse on genuinely small screens */
@media screen and (max-width:1000px) {
    #width960 {
        width:100%;
        margin:0 auto 20px auto;
        padding:calc(var(--mobile-header-height) + var(--mobile-banner-height) + 14px) 10px 0 10px;
    }

    #header-container {
        left:0;
        transform:none;
        width:100%;
        max-width:100%;
        box-shadow:0 2px 8px rgba(0, 0, 0, 0.08);
    }

    .desktop-header {display:none;}

    .mobile-header {
        display:flex;
        align-items:center;
        justify-content:space-between;
        height:var(--mobile-header-height);
        padding:0 12px;
        background:#ffffff;
        border-bottom:1px solid #eeeeee;
    }

    .mobile-header h1 {
        margin:0;
        font-size:2.0em;
        line-height:1;
    }

    .mobile-header h1 a {
        color:#2a5a7a;
        text-decoration:none;
    }

    .mobile-menu-button {
        display:inline-flex;
        align-items:center;
        justify-content:center;
        width:42px;
        /*
          Fills the header bar's full height (not just the icon glyph's own
          42px) so its hover/click area touches the dropdown below with no
          dead zone in between - otherwise the mouse loses :hover crossing
          the gap and the menu closes before you reach it.
        */
        height:100%;
        border:1px solid #dddddd;
        border-radius:4px;
        background:#ffffff;
        color:#2a5a7a;
        font-size:1.8em;
        line-height:1;
        cursor:pointer;
    }

    .mobile-menu-button:hover {
        background:#f7f7f7;
    }

    .mobile-menu-button:focus-visible {
        outline:2px solid #2a5a7a;
        outline-offset:2px;
    }

    #banner {
        margin:0 auto;
        background:#ffffff;
    }

    #banner .col {margin:0;}

    #banner img {
        display:block;
        width:100%;
        height:auto;
    }

    .row {
        width:100%;
        max-width:100%;
    }

    .col {
        float:none;
        display:block;
        width:auto !important;
        margin:0 0 20px 0;
    }

    .row .row {
        margin:0;
        display:block;
    }

    #content {margin-left:0;}

    /* Sticky section headings: see the desktop rule above for why sticky over fixed. */
    #content > h2 {
        position:sticky;
        top:calc(var(--mobile-header-height) + var(--mobile-banner-height));
        z-index:950;
        background:#ffffff;
        padding-top:6px;
    }

    /* Same idea, for pages with a toolbar/legend block that should pin along with the heading. */
    #content > .sticky-header {
        position:sticky;
        top:calc(var(--mobile-header-height) + var(--mobile-banner-height));
        z-index:950;
        background:#ffffff;
        padding-top:6px;
        overflow:hidden;
    }

    /* Stacks directly below .sticky-header: see the desktop rule above. */
    #content > .sticky-subheading {
        position:sticky;
        top:calc(var(--mobile-header-height) + var(--mobile-banner-height) + var(--sticky-header-height));
        z-index:940;
        background:#ffffff;
        margin-bottom:0;
        padding-top:6px;
        padding-bottom:16px;
    }

    #footer .col {text-align:left;}

    h1 {font-size:2.4em;}
    h2 {font-size:1.8em;}
    h3 {font-size:1.4em;}

    /*
      On mobile, reuse the existing sidebar as a fixed dropdown menu.
      This keeps sidebar.html as the single source of menu items.
    */
    #sidebar-container {
        position:fixed;
        /*
          Flush against the header bar's bottom edge (which the button now
          fills exactly, see .mobile-menu-button) - no gap, so the mouse
          never leaves a hovered element while moving from button to menu.
        */
        top:var(--mobile-header-height);
        right:10px;
        left:auto;
        z-index:1001;
        width:min(280px, calc(100vw - 20px));
        max-height:calc(100vh - var(--mobile-header-height) - 20px);
        overflow-y:auto;
        margin:0;
        opacity:0;
        visibility:hidden;
        pointer-events:none;
        transform:translateY(-6px);
        transition:opacity 120ms ease, transform 120ms ease, visibility 120ms ease;
    }

    #sidebar-container #sidebar {
        width:100% !important;
        margin:0;
        padding:10px 14px;
        background:#ffffff;
        border:1px solid #dddddd;
        box-shadow:0 8px 24px rgba(0, 0, 0, 0.16);
    }

    #sidebar-container ul.menu {
        margin:0;
        padding:0;
    }

    #sidebar-container ul.menu li {
        margin:0;
        padding:8px 0;
        border-bottom:1px solid #eeeeee;
    }

    #sidebar-container ul.menu li:last-child {border-bottom:none;}

    #sidebar-container ul.menu li a {
        display:block;
        font-size:1.25em;
        line-height:1.2;
    }

    /* Revealed by .mobile-menu-button's click handler in sidebar.js */
    #sidebar-container.is-open {
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        transform:translateY(0);
    }
}

/* On devices with a real mouse/trackpad (not touch), also reveal on hover */
@media screen and (max-width:1000px) and (hover:hover) {
    #header-container:has(.mobile-menu-button:hover) + .row #sidebar-container,
    #sidebar-container:hover {
        opacity:1;
        visibility:visible;
        pointer-events:auto;
        transform:translateY(0);
    }
}