/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: local('Lato Italic'), local('Lato-Italic'), url(https://fonts.gstatic.com/s/lato/v15/S6u8w4BMUTPHjxsAUi-qNiXg7eU0.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  src: local('Lato Italic'), local('Lato-Italic'), url(https://fonts.gstatic.com/s/lato/v15/S6u8w4BMUTPHjxsAXC-qNiXg7Q.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 700;
  src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url(https://fonts.gstatic.com/s/lato/v15/S6u_w4BMUTPHjxsI5wq_FQftx9897sxZ.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 700;
  src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url(https://fonts.gstatic.com/s/lato/v15/S6u_w4BMUTPHjxsI5wq_Gwftx9897g.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v15/S6uyw4BMUTPHjxAwXiWtFCfQ7A.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v15/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v15/S6u9w4BMUTPHh6UVSwaPGQ3q5d0N7w.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  src: local('Lato Bold'), local('Lato-Bold'), url(https://fonts.gstatic.com/s/lato/v15/S6u9w4BMUTPHh6UVSwiPGQ3q5d0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 10px;
}

/* Style the navigation links */
.navbar ul {
  text-align: right; /* Align list items to the left */
}

.navbar ul li {
  display: inline-block; /* Display list items horizontally */
  margin-right: 20px; /* Space between each list item */
}

.navbar ul li:last-child {
  margin-right: 50px; /* Remove margin from the last list item */
}

.navbar ul li a {
  text-decoration: none; /* Remove underlines from links */
  color: #333; /* Set link text color */
  font-weight: bold; /* Make the text bold */
  font-family: Arial, sans-serif; /* Specify font family */
}

.navbar ul li a:hover {
  color: #1008f6; /* Change color on hover */
}

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

a:focus,
a:hover {
  color: #f09228;
  text-decoration: none;
}

body,
td,
th,
tr,
p,
a {
  font-family: 'Lato', Verdana, Helvetica, sans-serif;
  font-size: 14px;
}

strong {
  font-family: 'Lato', Verdana, Helvetica, sans-serif;
  font-size: 14px;
}

h2 {
  margin: 0;
  font-weight: normal;
  font-family: 'Lato', Verdana, Helvetica, sans-serif;
  font-size: 22px;
}

.papertitle {
  font-family: 'Lato', Verdana, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 700;
}

.name {
  padding-top: 20px;
  margin: 0;
  font-family: 'Lato', Verdana, Helvetica, sans-serif;
  font-size: 32px;
}

.one {
  width: 160px;
  height: 160px;
  position: relative;
}

.two {
  width: 160px;
  height: 160px;
  position: absolute;
  transition: opacity .2s ease-in-out;
  -moz-transition: opacity .2s ease-in-out;
  -webkit-transition: opacity .2s ease-in-out;
}

.fade {
  transition: opacity .2s ease-in-out;
  -moz-transition: opacity .2s ease-in-out;
  -webkit-transition: opacity .2s ease-in-out;
}

span.highlight {
  background-color: #ffffd0;
}

/* simple flex layout for each running entry */
.entry {
  display: flex;
  flex-wrap: wrap;          /* stacks on small screens */
  gap: 2rem;                /* space between text and image */
  margin-block: 2.5rem;
}

.entry__text {
  flex: 1 1 60ch;           /* grow/shrink, ideal width */
  min-width: 280px;
}

.entry__image {
  flex: 0 1 320px;          /* keeps image within ~320 px */
  max-width: 100%;
  object-fit: cover;
  border-radius: 6px;       /* optional: soft corners */
}


/* === Running page layout helpers ============================ */

/* Centres the whole column and limits max width (matches your screenshot) */
.run-wrapper {
  max-width: 800px;
  margin-inline: auto;        /* centres horizontally */
  padding-inline: 1rem;       /* little breathing room on small screens */
}

/* h1 style can stay global; this just recentres if needed */
.run-title { text-align: center; }

/* Flex container for each race entry */
/* Default: stacks on small screens */
.run-entry {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-block: 3rem;
}

/* ≥768 px: force side-by-side */
@media (min-width: 768px) {
  .run-entry   { flex-wrap: nowrap; }
  .run-text    { flex: 1 1 0; }      /* shrinkable text */
  .run-figure  { flex: 0 0 320px; }  /* fixed-width image */
}


/* Text section grows to fill space */
.run-text {
  flex: 1 1 60ch;             /* 60 ch = comfortable reading width */
  min-width: 280px;
}

/* Figure / image section shrinks if space is tight */
.run-figure {
  flex: 0 1 320px;            /* never wider than about 320 px */
  margin: 0;                  /* kill default <figure> margins */
}

.run-figure img {
  width: 100%;
  height: auto;
  object-fit: cover;          /* tidy crop if aspect ≠ container */
  border-radius: 4px;         /* optional aesthetic */
}


/* Smooth scrolling (nice UX) */
html { scroll-behavior: smooth; }

/* --- mini table-of-contents under the intro ------------------ */
.run-index ul {
  margin: 1.5rem 0 2rem;          /* space above & below */
  padding-left: 1rem;
  list-style: decimal;               /* kill bullets */
  display: flex;
  flex-direction: column;   /* vertical stack */
  gap: .5rem;               /* space between items *//* row gap | column gap */
  font-weight: 700;               /* make links stand out */
}

.run-index a {
  color: #1772d0;                 /* matches site links */
  text-decoration: none;
}

.run-index a:hover,
.run-index a:focus {
  color: #f09228;                 /* your existing hover colour */
  text-decoration: underline;
}


/* smooth scroll for in-page links */
html { scroll-behavior: smooth; }

/* === layout identical to running page ========================= */
.blog-wrapper {           /* centres & clamps width */
  max-width: 800px;
  margin-inline: auto;
  padding-inline: 1rem;
}

.blog-title { text-align: center; }

.blog-entry {
  display: flex;
  flex-wrap: wrap;        /* stacks on mobile */
  gap: 2rem;
  margin-block: 3rem;
}

.blog-text   { flex: 1 1 0; min-width: 280px; }
.blog-figure { flex: 0 0 320px; margin: 0; }

.blog-figure img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 4px;
}

/* === table-of-contents with sub-headings ====================== */
.blog-index {
  margin: 1.5rem 0 2rem;
}

.blog-index h2 {
  font-size: 1rem;
  font-weight: 700;
  margin: 1rem 0 .25rem;
}

/* list inside each subsection */
.blog-index ul {
  list-style: decimal;
  padding-left: 1rem;     /* small indent under sub-heading */
  margin: 0 0 .75rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  font-weight: 700;
}

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

.blog-index a:hover,
.blog-index a:focus {
  color: #f09228;
  text-decoration: underline;
}

/* centred section titles that sit between the index and the entries */
.blog-section-title {
  text-align: center;
  font-size: 1.7rem;   /* tweak if you want bigger/smaller */
  font-weight: 700;
  margin: 2.5rem 0 1.5rem;
}


/* === Home page layout (mirrors run/blog pattern) ============= */
.home-wrapper {
  max-width: 800px;
  margin-inline: auto;
  padding-inline: 1rem;
}

.home-entry {
  display: flex;
  flex-wrap: wrap;        /* stacks on small screens */
  gap: 2rem;
  margin-block: 3rem;
}

.home-text   { flex: 1 1 0; min-width: 280px; }
.home-figure { flex: 0 0 320px; margin: 0; }

.home-figure img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 4px;
}

.home-title {
  text-align: center;
  margin-bottom: 1.5rem;
}


/* === Resources page layout =================================== */
/* === make Resources page look like Blogs ===================== */

/* wrapper & title already match size/centering, this just keeps naming parallel */
.res-wrapper {            /* same 800-px centred column */
  max-width: 800px;
  margin-inline: auto;
  padding-inline: 1rem;
}

.res-title      { text-align: center; }
.res-section-title {
  text-align: center;
  font-size: 1.7rem;      /* matches .blog-section-title */
  font-weight: 700;
  margin: 2.5rem 0 1.5rem;
}

/* entry block (flex layout) */
.res-entry {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-block: 3rem;     /* same spacing as .blog-entry */
}
.res-text   { flex: 1 1 0; min-width: 280px; }

/* -------- table-of-contents (index) -------- */
.res-index {
  margin: 1.5rem 0 2rem;          /* identical to .blog-index */
}

.res-index h2 {
  font-size: 1rem;
  font-weight: 700;
  margin: 1rem 0 .25rem;
}

/* numbered, bold list just like blogs */
.res-index ul {
  list-style: decimal;            /* numbered list */
  padding-left: 1rem;
  margin: 0 0 .75rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  font-weight: 700;
}

.res-index a {
  color: #1772d0;
  text-decoration: none;
}
.res-index a:hover,
.res-index a:focus {
  color: #f09228;
  text-decoration: underline;
}