/* Self-hosted Lato — no external request, so navigation paints immediately */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/lato-400-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/lato-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/lato-700.woff2') format('woff2');
}

/* Browser reset */
html {
    box-sizing: border-box;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    /* The front page is short and /about is long. Without reserving the
       scrollbar, the bar appears on one and not the other, shifting the
       whole layout sideways as you navigate. */
    overflow-y: scroll;          /* fallback */
    scrollbar-gutter: stable;    /* modern browsers */
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    background-color: #fff;
    color: #000;
    margin: 0 auto;
    max-width: 50em;
    font-family: 'Lato', Verdana, Helvetica, sans-serif;
    line-height: 1.5;
    padding: 2em 1em;
    scroll-behavior: smooth;
}

h1,
h2,
strong {
    color: #000;
}

h1 {
    font-size: 32px;
}

h2 {
    /* block, not inline, so the rule spans the full column width */
    display: block;
    font-size: 22px;
    font-weight: normal;
    margin-bottom: 0;
    padding-bottom: 0.25em;
    border-bottom: 1px solid #ccc;
}

section {
    margin-top: 1.5em;
}

a {
    color: #1772d0;
    text-decoration: none;
}

a:hover,
a:focus {
    color: #f09228;
}

.headshot {
    float: right;
    width: 14em;
    padding-left: 2em;
}

.headshot img {
    width: 100%;
    height: auto;   /* without this the height="" attribute stretches the photo */
    border-radius: 8px;   /* rounded corners; use 50% for a full circle */
}

.contact {
    margin-top: 0.7em;
    font-size: 14px;
    line-height: 1.5;
}

.contact > div {
    display: flex;
    align-items: flex-start;
    gap: 0.55em;
    margin-bottom: 0.35em;
}

.contact svg {
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    margin-top: 0.2em;
    fill: currentColor;   /* icons take the colour of the text/link beside them */
}

/* The pin is a tall teardrop in a square box, so it reads smaller than the
   brand marks. Scale it up, with negative side margins so the icon column
   stays 15px wide and every label below stays flush. */
.contact svg.pin {
    width: 19px;
    height: 19px;
    margin-top: 0.05em;
    margin-left: -2px;
    margin-right: -2px;
}

@media (max-width: 650px) {
    .headshot {
        width: 10em;
    }
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-flow: row;
}

@media (max-width: 650px) {
    header {
        display: flex;
        align-items: baseline;
        flex-flow: column;
    }
}

@media (max-width: 390px) {
    header {
        width: 8em;
    }
}

p + ul {
    margin-top: -10px;
}

/* Research entries: figure on the left, text on the right */
section {
    clear: right;   /* never let an entry tuck beside the headshot */
}

.more-link {
    margin-top: 1.2em;
}

.section-note {
    margin: 0.5em 0 0;
    font-size: 14px;
}

.pub {
    display: flex;
    gap: 1.2em;
    align-items: center;   /* figure and text share a centre line, as the old tables did */
    margin-top: 1.2em;
}

.pub-fig {
    flex: 0 0 175px;
}

.pub-fig img {
    width: 100%;
    display: block;
}

.pub-body {
    flex: 1;
    min-width: 0;
}

.pub-body p {
    margin: 0;
}

@media (max-width: 650px) {
    .pub {
        flex-flow: column;
        gap: 0.6em;
    }

    .pub-fig {
        flex: none;
        width: 175px;
    }
}

/* ------------------------------------------------------------------
   Sub-pages (courses, cs-domain, linklist)
   ------------------------------------------------------------------ */

/* The course list is dense, so it runs without bullets */
ul.dotpoints {
    list-style: none;
    padding-left: 0;
}

/* Link lists (Readings, and Pages on the about page) keep their bullets */
ul.linklist {
    list-style: disc;
    padding-left: 1.3em;
}

ul.dotpoints > li {
    font-size: 14px;
    margin: 0.15em 0;
}

ul.linklist > li {
    margin-bottom: 0.7em;
}

/* courses I found especially interesting */
ul.dotpoints > li.favorite::after {
    content: " \2B50";
    font-size: 0.9em;
}

/* Code blocks in the CS-domain tutorial */
pre {
    background: #f5f5f5;
    border: 1px solid #e1e1e1;
    border-radius: 6px;
    padding: 12px 14px;
    margin: 12px 0;
    overflow-x: auto;
    font-size: 14px;
    line-height: 1.4;
}

pre code {
    background: none;
    border: none;
    padding: 0;
    white-space: pre;
}

code {
    font-size: 14px;
}

/* The CSID / SUNet input box on the tutorial page */
.idbox {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px 18px;
    margin: 20px 0;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #f7f7f9;
}

.idbox label {
    display: flex;
    flex-direction: column;
    font-size: 14px;
    font-weight: 600;
    gap: 4px;
}

.idbox input {
    font-family: monospace;
    font-size: 14px;
    padding: 6px 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.csid-val,
.sunet-val {
    color: #d6336c;
    font-weight: 600;
}

.dateline {
    margin-top: 0;
    font-size: 14px;
    color: #555;
}

/* ------------------------------------------------------------------
   Previously: role on the left, organisation in a fixed-width column
   on the right so every organisation lands on the same vertical line
   regardless of how long the role text is.
   ------------------------------------------------------------------ */
ul.prev {
    list-style: none;
    padding-left: 0;
}

ul.prev > li {
    display: grid;
    grid-template-columns: 1fr 10em;
    gap: 0 1.5em;
    margin-bottom: 1em;
}

ul.prev .org {
    font-weight: 700;
}

/* the notable thing (a prize, a placing) sits under the entry in italics */
ul.prev .note {
    grid-column: 1 / -1;
    margin-top: 2px;
    font-style: italic;
    font-size: 13.5px;
    color: #555;
}

@media (max-width: 34em) {
    ul.prev > li {
        grid-template-columns: 1fr;
        gap: 0;
    }
    ul.prev .org { order: -1; }   /* organisation first when stacked */
}

/* A list that reads as lines rather than bullet points */
ul.plain {
    list-style: none;
    padding-left: 0;
}

ul.plain > li {
    margin-bottom: 0.35em;
}

/* ------------------------------------------------------------------
   News and olds: date in a fixed left column so every date lines up,
   however long the entry beside it runs. Newest first.
   ------------------------------------------------------------------ */
ul.news {
    list-style: none;
    padding-left: 0;
}

ul.news > li {
    display: grid;
    grid-template-columns: 7.5em 1fr;
    gap: 0 1.8em;
    margin-bottom: 0.7em;
}

/* Right-aligned so the gap between date and event is the same on every row.
   Left-aligned, a long date like "August 2026" nearly touches its text while
   a short one like "2024" leaves a wide gap, and the column reads as ragged. */
ul.news .when {
    text-align: right;
    color: #777;
    font-size: 14px;
    padding-top: 0.1em;
}

@media (max-width: 34em) {
    ul.news > li {
        grid-template-columns: 1fr;
        gap: 0;
        margin-bottom: 0.9em;
    }
    ul.news .when {
        text-align: left;
        font-size: 13.5px;
        padding-top: 0;
    }
}


/* The equal-contribution note explains the asterisks in the author list */
.eqcontrib {
    font-size: 0.85em;
}

/* An in-progress entry has no figure, so it is indented to sit in the same
   text column as the entries that do. That alignment is what makes it read
   as a sibling entry rather than a trailing note on the paper above. */
.pub.inprogress {
    margin-top: 1.6em;
    padding-left: calc(175px + 1.2em);   /* figure width + the flex gap */
}

.pub.inprogress .title {
    font-weight: 700;
}

.pub.inprogress .venue {
    margin-top: 0.1em;
}

@media (max-width: 650px) {
    .pub.inprogress {
        padding-left: 0;
    }
}