/* ==========================================================================
   Aditya Taparia — personal site
   Layout inspired by https://github.com/jonbarron/jonbarron.github.io
   ========================================================================== */

:root {
  /* Paper: a barely-there blue cast rather than neutral grey, so the blues
     below sit on a ground that belongs to the same family. */
  --bg: #F7F9FC;
  --surface: #FFFFFF;

  --text: #23282D;
  --muted: #5C636A;

  /* Blue ramp, built out from the existing #316CAD. Every step sits on the
     same 211deg hue as --blue-600, so the tints read as one family rather
     than as stock Material blues borrowed from somewhere else. */
  --blue-50:  #EDF3FA;
  --blue-100: #D9E5F4;
  --blue-150: #BBDEFB;
  --blue-250: #A2D0F7;
  --blue-600: #316CAD;
  --blue-700: #2A5C95;
  --blue-800: #1E4B7D;

  /* Green ramp, built out from the existing #C8E6C9 / #2E7D32. */
  --green-50:  #EAF5EB;
  --green-100: #D2E8D4;
  --green-150: #C8E6C9;
  --green-250: #ABD8AD;
  --green-600: #2E7D32;
  --green-700: #256B29;
  --green-800: #1F5E23;

  --link: var(--blue-600);
  --link-hover: var(--blue-800);
  --accent: var(--blue-600);

  /* Filled tints, not near-white washes: the button has to hold its own
     against the page ground, which is itself faintly blue. Labels are the
     body ink, so a resting button reads as black-on-colour and only the
     hover state inverts. */
  --btn-bg: var(--blue-150);
  --btn-border: var(--blue-250);
  --btn-text: var(--text);
  --btn-hover: var(--blue-600);

  --btn-pub-bg: var(--green-150);
  --btn-pub-border: var(--green-250);
  --btn-pub-text: var(--text);
  --btn-pub-hover: var(--green-600);

  --highlight-red: #D64545;
  --border: #E3E8EE;
  --border-soft: #EDF0F4;
  --page-width: 900px;
  --radius: 7px;

  /* The right-hand rail: photo and contact links share one width so they
     form a single column with a hard right edge. */
  --rail: 320px;
}

/* --------------------------------------------------------------- base --- */

body {
  background-color: var(--bg);
  margin: 0;
  padding: 0;
}

body, td, th, tr, p, a, div, li {
  font-family: 'DM Sans', 'Lato', Verdana, Helvetica, sans-serif;
  font-size: 15px;
  /* Without this, text falls back to `normal` (~1.2) and titles, authors and
     venues run together. This is the single biggest readability lever here. */
  line-height: 1.62;
}

p {
  margin: 0 0 13px 0;
}

/* Justify only the long-form bio prose. Justifying short lines that contain
   long unbreakable link text (news items, paper titles) opens ugly rivers of
   whitespace. */
/* Ragged right, not justified: justification on this measure needs
   hyphenation to avoid rivers, and the hyphens end up more distracting
   than the rivers were. */
.intro-text p {
  text-align: left;
  text-wrap: pretty;
}

a {
  color: var(--link);
  text-decoration: none;
}

a:focus,
a:hover {
  color: var(--link-hover);
  text-decoration: underline;
}

strong {
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
}

/* Legacy custom elements, kept so the original look is preserved. Real
   heading semantics are carried by .h-name / .h-section / .pub-title. */
heading, .h-section {
  font-family: inherit;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.011em;
  color: var(--text);
  display: block;
  margin: 0 0 14px 0;
}

/* Homepage sections only. Paper pages nest their own <section>s inside an
   <article>, so they never pick this up. */
.home-section {
  margin-top: 46px;
}

name, .h-name {
  font-family: inherit;
  font-size: 37px;
  font-weight: 700;
  letter-spacing: -0.021em;
  line-height: 1.14;
  color: var(--text);
  display: block;
  margin: 0;
}

/* On the inner pages the name is the first thing on the page, so it needs
   air above whatever precedes it: a breadcrumb, or the top of the document.
   The homepage gets its own spacing from .intro-grid's padding. */
.breadcrumb + .h-name {
  margin: 18px 0 10px 0;
}

.page > .h-name:first-child {
  margin: 48px 0 10px 0;
}

.h-tagline {
  font-size: 14px;
  color: var(--muted);
  margin: 7px 0 22px 0;
}

/* Wins over `.intro-text p` above, which would otherwise pull the tagline
   up to the bio's size. */
.intro-text .h-tagline {
  font-size: 14px;
}

papertitle, .pub-title {
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
  display: inline;
  margin: 0;
}

h1.h-name, h2.h-section, h3.pub-title {
  padding: 0;
}

/* Space between a paper title and everything under it. The title must be a
   block to carry margin at all — as an inline element it cannot. */
h3.pub-title {
  display: block;
  margin: 0 0 9px 0;
  line-height: 1.38;
}

.pub-authors {
  margin-bottom: 5px;
  color: var(--text);
}

.pub-venue {
  margin-bottom: 4px;
  color: var(--muted);
}

/* ------------------------------------------------------------- layout --- */

.page {
  width: 100%;
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

/* Photo and contact links stack into one right-hand rail so the short
   column has enough body to sit beside a long bio instead of floating.
   The empty third row soaks up whatever height the prose has left over,
   which keeps the links tucked under the photo rather than drifting down
   with it. */
.intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--rail);
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "text photo"
    "text links"
    "text .";
  column-gap: 30px;
  align-items: start;
  padding: 56px 0 0 0;
}

.intro-text {
  grid-area: text;
  min-width: 0;
}

/* The bio is the longest run of text on the site; a notch below the base
   size and a touch more leading makes the measure readable at this width. */
.intro-text p,
.intro-text a,
.intro-text li {
  font-size: 14.5px;
  line-height: 1.68;
}

.intro-text p {
  margin: 0 0 15px 0;
}

.intro-photo {
  grid-area: photo;
}

/* No aspect-ratio and no object-fit: the file is the full uncropped frame,
   so its own 3:4 proportions drive the box and nothing gets trimmed. The
   width/height attributes on the tag reserve the right space before it
   loads. */
.intro-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6%;
}

.name-block {
  margin-bottom: 0;
}

/* ------------------------------------------------------------ buttons --- */

/* Rounded rather than pill, flat rather than shadowed. Spacing comes from
   the parent's `gap` so every button sits on the same rhythm instead of
   each carrying its own margin. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  text-decoration: none;
  color: var(--btn-text);
  background-color: var(--btn-bg);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
  vertical-align: middle;
  cursor: pointer;
  white-space: nowrap;
}

.btn .material-icons {
  font-size: 1.15em;
  text-decoration: none;
}

/* Brand marks are drawn, not typeset, so they need the sizing the icon font
   gets for free. currentColor is what carries them through the hover
   inversion along with the label. */
.btn .btn-icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: currentColor;
}

.btn:hover {
  background-color: var(--btn-hover);
  border-color: var(--btn-hover);
  color: #fff;
  text-decoration: none;
}

.btn:focus,
.btn:active {
  color: var(--btn-text);
  text-decoration: none;
}

.btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn:focus:hover,
.btn:active:hover {
  background-color: var(--btn-hover);
  color: #fff;
  text-decoration: none;
}

.btn-publication {
  background-color: var(--btn-pub-bg);
  border-color: var(--btn-pub-border);
  color: var(--btn-pub-text);
}

.btn-publication:hover,
.btn-publication:focus:hover,
.btn-publication:active:hover {
  background-color: var(--btn-pub-hover);
  border-color: var(--btn-pub-hover);
  color: #fff;
  text-decoration: none;
}

.btn-publication:focus,
.btn-publication:active {
  color: var(--btn-pub-text);
  text-decoration: none;
}

/* Contact links: a full-width stack in the rail under the photo. Wrapping
   them into rows leaves a ragged edge, because "Google Scholar" is nearly
   twice the width of "CV". */
/* Two centred rows under the photo, the fuller one on top. The break is an
   empty full-width flex item emitted by build.py rather than a wrap the
   browser happens to land on, so the split stays 3 + 2 whatever the labels
   measure. */
.link-row {
  grid-area: links;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}

.link-break {
  flex-basis: 100%;
  height: 0;
}

/* Both rows fill the rail, so their outer edges line up with the photo's
   instead of stopping a few pixels short of it. */
.link-row .btn {
  flex: 1 1 auto;
  justify-content: center;
  font-size: 13.5px;
  padding: 7px 12px;
}

.pub-links {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 12px;
}

/* --------------------------------------------------------------- news --- */

/* Cut to roughly five items tall. The half-row left showing at the bottom
   edge is the scroll affordance. */
.news-box {
  max-height: 244px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2px 14px;
  background-color: var(--surface);
  margin-top: 0;
}

.news-table tr + tr td {
  border-top: 1px solid var(--border-soft);
}

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

.news-table td {
  padding: 8px 4px;
  vertical-align: top;
  font-size: 14px;
  line-height: 1.55;
}

.news-table a {
  font-size: 14px;
}

.news-table td.news-date-cell {
  width: 62px;
  white-space: nowrap;
}

/* A date is a label, not a link: grey and bold sets it as the gutter marker
   for the row instead of competing with the paper titles beside it. */
.news-date {
  display: inline-block;
  padding-top: 1px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.015em;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.news-item-title {
  font-weight: 600;
}

.news-highlight-red {
  font-weight: 600;
  color: var(--highlight-red);
}

/* Affiliation wordmarks are wide, not square: size by height so they stay
   legible inline instead of being squashed into a 15px box. */
/* Square company marks at 15x15, matching the sizing used before. */
.news-logo {
  width: 15px;
  height: 15px;
  margin: 0 2px;
  vertical-align: -2px;
  object-fit: contain;
}

/* ------------------------------------------------------- publications --- */

.tab-navigation {
  display: flex;
  flex-wrap: wrap;
  margin: 20px 0 10px 0;
  border-bottom: 2px solid var(--border);
  position: relative;
}

.tab-button {
  background: none;
  border: none;
  padding: 12px 24px;
  font-family: 'Lato', Verdana, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #666;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: color 0.3s ease;
  margin-right: 20px;
  position: relative;
  text-decoration: none;
}

.tab-button:hover {
  color: var(--accent);
  text-decoration: none;
}

.tab-button.active {
  color: var(--accent);
  font-weight: 600;
}

.tab-button::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 3px;
  background-color: var(--accent);
  transition: width 0.3s ease;
}

.tab-button.active::after {
  width: 100%;
}

.tab-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Each paper is rendered exactly once. The tabs filter that single list
   rather than duplicating every entry into three panels, so there is no
   hidden duplicate content for crawlers to discount. */
.pub-list {
  margin-top: 20px;
  min-height: 200px;
  list-style: none;
  padding: 0;
}

.pub-list[data-filter="conference"] .pub-item:not([data-category="conference"]),
.pub-list[data-filter="preprint"]   .pub-item:not([data-category="preprint"]) {
  display: none;
}

.pub-count {
  color: var(--muted);
  font-size: 13px;
  margin: 8px 0 0 0;
}

/* Two-column grid with a fixed thumbnail column. The column is reserved even
   when a paper has no image, so every title, author line and button row in
   the list shares one left edge instead of stepping in and out. */
.pub-item {
  display: grid;
  grid-template-columns: 178px minmax(0, 1fr);
  column-gap: 22px;
  align-items: start;
  padding: 10px 0;
  margin-bottom: 10px;
}

/* One rule sizes everything inside an entry. Without it the element-level
   `body, td, ... div, a` rule near the top pins nested links back to 15px
   while their containers shrink, and author lines break mid-name. */
.pub-body,
.pub-body div,
.pub-body p,
.pub-body a,
.pub-body li {
  font-size: 14px;
}

.pub-body h3.pub-title,
.pub-body h3.pub-title a {
  font-size: 15px;
}

.pub-body .pub-venue,
.pub-body .pub-venue a {
  font-size: 13.5px;
}

.pub-body .description {
  font-size: 13px;
}

.pub-body .btn {
  font-size: 13px;
  padding: 6px 11px;
}

.pub-thumb {
  grid-column: 1;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.pub-thumb img {
  width: 100%;
  height: auto;
  max-height: 148px;
  object-fit: contain;
  border-radius: 8%;
  transition: border-radius 0.2s ease-in-out;
}

.pub-thumb img:hover {
  border-radius: 12%;
}

.pub-body {
  grid-column: 2;
  min-width: 0;
}

/* The /papers/ index has no thumbnails at all, so it drops the image column
   entirely rather than reserving 150px of empty space on every row. */
.pub-list-compact .pub-item {
  grid-template-columns: minmax(0, 1fr);
}

.pub-list-compact .pub-body {
  grid-column: 1;
}

.pub-venue {
  font-style: italic;
}

.pub-award {
  font-weight: 600;
  color: var(--highlight-red);
}

.description {
  display: block;
  margin: 4px 0;
  color: var(--muted);
  font-style: italic;
  padding: 4px 0;
}

.bibtex {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  padding: 0 4px;
  background-color: #fff3e0;
  border-left: 4px solid #ffb300;
  font-family: monospace;
  white-space: pre-wrap;
  font-size: small;
  transition: max-height 0.5s ease, opacity 0.5s ease;
  scrollbar-width: thin;
}

.bibtex.show {
  max-height: 320px;
  overflow-y: auto;
  overflow-x: auto;
  opacity: 1;
  margin-top: 4px;
  padding: 4px;
}

.bibtex pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
}

/* -------------------------------------------------------- paper pages --- */

.breadcrumb {
  padding: 28px 0 0 0;
  font-size: 13px;
  color: var(--muted);
}

.paper-header {
  padding: 8px 0 4px 0;
}

.paper-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--accent);
  margin: 0 0 8px 0;
  line-height: 1.3;
  text-align: left;
}

.paper-authors {
  margin: 0 0 4px 0;
}

.paper-meta {
  font-style: italic;
  margin: 0 0 12px 0;
}

.paper-figure {
  margin: 16px 0;
  text-align: center;
}

.paper-figure img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.paper-section {
  margin: 24px 0;
}

.paper-section h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px 0;
}

.paper-bibtex {
  background-color: #fff3e0;
  border-left: 4px solid #ffb300;
  padding: 10px;
  overflow-x: auto;
  font-family: monospace;
  font-size: small;
  white-space: pre-wrap;
  word-break: break-word;
  border-radius: 0 4px 4px 0;
}

.footer-nav {
  margin: 40px 0 24px 0;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 13px;
  text-align: center;
}

/* `auto` on the horizontal margins, not 0: this element also carries .page,
   whose `margin: 0 auto` is what centres it. A `40px 0 24px 0` shorthand here
   silently overrides that and pins the footer to the left edge. */
.site-footer {
  margin: 40px auto 24px;
  padding-top: 16px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}

/* -------------------------------------------------------------- modal --- */

.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  justify-content: center;
  align-items: center;
  padding: 16px;
}

.modal.open {
  display: flex;
}

.modal-content {
  position: relative;
  background: #000;
  padding: 0;
  border-radius: 8px;
  width: min(900px, 92vw);
  max-height: 86vh;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  animation: dropIn 0.3s ease-out;
  overflow: hidden;
}

.modal-content video {
  width: 100%;
  max-height: 86vh;
  height: auto;
  display: block;
}

.close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  font-size: 20px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.8);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  z-index: 10;
  transition: background-color 0.2s;
}

.close-btn:hover {
  background-color: rgba(0, 0, 0, 1);
}

@keyframes dropIn {
  from { transform: translateY(-30px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------- responsive --- */

/* The rail needs its full width to hold three links across, so the intro
   stacks well before the phone breakpoint rather than squeezing the prose
   into a forty-character measure beside a shrinking photo. */
@media (max-width: 820px) {
  /* One column: photo, then name and bio, then the links. */
  .intro-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "photo"
      "text"
      "links";
    row-gap: 20px;
    padding-top: 32px;
  }

  .intro-photo {
    width: 190px;
  }

  /* Ragged left edge under a left-aligned photo and bio; the forced 3 + 2
     split belongs to the rail, not to a full-width column. */
  .link-row {
    justify-content: flex-start;
    margin-top: 0;
  }

  .link-break {
    display: none;
  }

  /* Natural widths on a full-width column; stretching two links across a
     phone screen makes them look like form fields. */
  .link-row .btn {
    flex: 0 0 auto;
  }

  .home-section {
    margin-top: 36px;
  }
}

@media (max-width: 700px) {
  p, td, span {
    text-align: left;
  }

  .tab-button {
    padding: 10px 12px;
    margin-right: 8px;
  }

  /* Single column on phones: thumbnail above the text, both full width. */
  .pub-item {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 10px;
  }

  .pub-thumb,
  .pub-body {
    grid-column: 1;
  }

  .pub-thumb {
    justify-content: flex-start;
    max-width: 220px;
  }

  .paper-title {
    font-size: 19px;
  }
}

/* ----------------------------------------------------------- a11y ----- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #fff;
  padding: 8px 12px;
  z-index: 2000;
}

.skip-link:focus {
  left: 8px;
  top: 8px;
}