/* ==========================================================================
   Design carried over from github.com/sidv23's site
   (theme/css/{colors,fonts,custom}.css), reduced to what this layout uses.
   Loaded after styles.css, which supplies the orderedlist/minimal frame.
   ========================================================================== */

:root {
  /* Fonts (fonts.css) */
  --mainFont: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --headingFont: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --codeFont: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Colour (colors.css) */
  --highlightColor: rgb(122, 45, 245);
  /* --highlightColor: rgb(229, 114, 0); */
  --ink: #36454f;          /* headings                                   */
  --rule: #b3cde0;         /* h2 underline                               */
  --paper: #faf8f8;        /* code blocks, table cells                   */
  --hairline: #a1a3a1;     /* dotted link underline                      */
}

/* ---------- type ---------- */

body {
  font-family: var(--mainFont);
  color: #4a4a4a;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--headingFont);
  font-weight: 700;
  color: var(--ink);
}

h1 { font-size: 26px; }
h2 {
  font-size: 19px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 5px;
  margin-top: 34px;
}
h3 { font-size: 15px; margin-top: 26px; }
h4, h5, h6 { font-size: 14px; }

strong { color: var(--ink); font-weight: 700; }

/* Utility for content that wants a span in the accent colour without an inline
   style: [Preprints]{.highlightColor}. */
.highlightColor { color: var(--highlightColor); }

/* Links: violet with a dotted underline that thickens on hover (custom.css). */
a {
  color: var(--highlightColor);
  text-decoration: none;
  border-bottom: dotted 0.5px var(--hairline);
}
a:hover {
  color: var(--highlightColor);
  border-bottom: dotted 1.5px var(--hairline);
}
/* ...but not for chrome: nav, pills, headings, listing titles. */
h1 a, h2 a, h3 a,
.site-nav a, .social-link, .back-link,
.listing-title a, .quarto-post .metadata a, .listing-description a {
  border-bottom: none;
}

code, pre, kbd, samp { font-family: var(--codeFont); font-size: 90%; }
pre { background: var(--paper); }

ul { list-style: square; }
dd { margin-left: 2em; }
hr { background: #9c0fc7; margin: 3em 0; }

blockquote {
  color: var(--ink);
  background: #e9e9e9;
  border-left: 10px solid #ccc;
  margin: 1.5em 0;
  padding: 0.5em 10px;
  font-style: normal;
  font-size: 95%;
}
blockquote p { display: inline; }
blockquote:before {
  color: #aaa;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}

th, td { background-color: var(--paper); }
th { color: var(--ink); }

/* ---------- left column ---------- */

/* Kept as a soft-cornered portrait, the way it sits on the live site,
   rather than cropped to a circle. */
.profile-photo {
  width: 200px;
  border-radius: 3px;
  border: none;
  margin-left: auto;
  margin-right: auto;
}

.site-name {
  font-family: var(--headingFont);
  font-size: 20px;
  font-weight: 300;
  color: var(--ink);
  margin: 0 0 4px;
}
.site-name .given { color: var(--highlightColor); font-weight: 700; }

.tagline { color: #7a7a7a; font-size: 13px; margin: 0 0 4px; }

.contact { font-size: 12px; color: #7a7a7a; margin: 0 0 14px; }
.contact i { color: var(--ink); margin-right: 4px; }

/* Pill links (custom.css .social-link), left-aligned to fit the 270px column. */
.social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 20px;
}
.social-link {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 4px;
  border: 0.2px solid #252626;
  background-color: var(--paper);
  color: var(--ink) !important;
  font-size: 11px;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.social-link:hover {
  background-color: var(--highlightColor);
  color: white !important;
  border-color: var(--highlightColor);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.social-link i { margin-right: 5px; }

.site-nav a { font-family: var(--mainFont); }
.site-nav a.active {
  color: var(--ink);
  box-shadow: inset 3px 0 0 var(--highlightColor);
}
.site-nav a:hover { color: var(--highlightColor); }
/* $...$ labels typeset by _includes/nav-math.html: keep them at text size. */
.site-nav .katex { font-size: 1em; }

/* ---------- blog ---------- */

.listing-title { font-family: var(--headingFont); font-size: 15px; }
.listing-title a { color: var(--ink); }
.listing-title a:hover { color: var(--highlightColor); }
.listing-date { font-family: var(--codeFont); font-size: 11px; }

/* ---------- publications / courses / talks ---------- */

/* Metadata lines under a bold title: authors, venue, term. */
.authors,
.course-meta {
  color: #7a7a7a;
  font-size: 13px;
}

/* Own name picked out in the author list (publications.css). */
.author-self {
  color: var(--highlightColor);
  font-weight: 600;
  opacity: 0.5;
}

/* Ported from the live site's `website.page-footer`.
   Placement (clear, border, spacing) is in styles.css. */
.site-footer {
  font-size: 11px;
  color: #9a9a9a;
}
.site-footer a { color: #9a9a9a; border-bottom: none; }
.site-footer a:hover { color: var(--highlightColor); }

/* ---------- link tiles ---------- */

/* Small, quiet tiles for the [arXiv] / [code] / [slides] links that used to be
   bare square brackets. */
.tile {
  display: inline-block;
  padding: 0 6px;
  margin: 5px 3px 0 0;
  border: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;   /* beat the dotted link underline */
  border-radius: 3px;
  background: var(--paper);
  color: #7a7a7a;
  font-size: 11px;
  line-height: 1.7;
  transition: all 0.15s ease-in-out;
}
.tile:hover {
  background: var(--highlightColor);
  border-color: var(--highlightColor);
  border-bottom-color: var(--highlightColor);
  color: #fff;
}

/* ---------- publication / course / talk entries ---------- */

/* Tight inside an entry, loose between entries. */
.entries p {
  line-height: 1.35;
  margin-bottom: 22px;
}

/* An entry can also be written as a list -- one top-level item per entry, its
   remaining lines as a nested list -- which keeps the lines of one entry
   visibly clustered in the source and drops the trailing double-spaces:

     * **Title**
         * [Authors]{.authors}
         * *Venue*, 2025.
         * [arXiv](url){.tile}

   Renders the same as the paragraph form: no markers, no indent, tight inside
   an entry and 22px between them. Both forms work; don't mix them in one
   block. */
.entries ul { list-style: none; padding: 0; margin: 0; }
.entries li { line-height: 1.35; }
.entries > ul > li { margin-bottom: 22px; }
/* Blank lines between entries make pandoc wrap each item in <p>. */
.entries li > p { margin: 0; }
/* A trailing double-space left over from the paragraph form would otherwise
   open a blank line before the nested list. */
.entries li > br { display: none; }
.entries h3 {
  margin-top: 30px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 400;
  color: #8a8a8a;
  border-bottom: 1px solid #ededed;
  padding-bottom: 4px;
}
.entries h3:first-child { margin-top: 0; }

/* The whole left column is centred -- photo, name, tagline, contact, pills and
   section list -- the way the live site's homepage profile column is. */
.site-header { text-align: center; }
.social-links { justify-content: center; }

/* ...except the section list, whose labels read better ranged left against the
   active-page bar. */
.site-nav a { text-align: left; }

/* ...and blog pages, where the column collapses to one back link that belongs
   at the top left. */
body.blog .site-header { text-align: left; }