/* ---------------------------------------------------------------------------
 * taylortjohnson.com - modern layer
 *
 * Loaded AFTER the inline <style> in header.php, and deliberately so. That
 * block is interpolated by PHP (widths come from $page_width) and is shared
 * with other pages, so editing it in place risks more than it gains. Every
 * rule here overrides rather than replaces, which means the site still renders
 * if this file is ever missing.
 *
 * It must not rename anything. content_paragraph, content_subsection,
 * content_subtitle, content_title, content_story, the p-* classes and the sw-*
 * classes are emitted by five generators in the cv repo (update_people.py,
 * update_software.py, update_teaching_website.py, update_grants_website.py,
 * update_service_website.py). A restyle that renamed them would break all five
 * silently, so this file only ever adds or overrides declarations.
 * ------------------------------------------------------------------------ */

:root {
  --ink:        #1a1d21;
  --ink-soft:   #4a5058;
  --ink-faint:  #6c737c;
  --rule:       #e2e5e9;
  --rule-soft:  #eef0f3;
  --bg:         #ffffff;
  --bg-soft:    #f7f8fa;
  --accent:     #1f4e8c;
  --accent-dk:  #163a68;
  --accent-bg:  #eaf0f8;
  --measure:    72ch;
  --pad:        clamp(1rem, 3vw, 2rem);
  --radius:     10px;
}

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

body {
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  margin: 0;
}

/* THE DESKTOP FIX.
 *
 * #all was `width: device-width; max-width: 800px` with `align: center`.
 * `align` is not a CSS property and `width: device-width` is not a valid
 * length, so browsers dropped both: the page became an 800px block flush
 * against the left margin, which is the wasted space that prompted this.
 * A real centring rule plus a wider ceiling fixes it, and the width now
 * scales with the viewport instead of being pinned. */
#all {
  width: auto !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: var(--pad) !important;
  box-sizing: border-box;
}

#header {
  width: auto !important;
  border: none !important;
  border-bottom: 1px solid var(--rule) !important;
  padding: 0 0 .75rem !important;
  margin-bottom: 1.25rem;
}

/* Menu: flex, so it wraps instead of overflowing on a phone. The old rule
 * floated fixed-width 100px+ boxes computed from an assumed 800px page. */
#header #menu ul {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  justify-content: center;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
#header #menu ul li { float: none !important; margin: 0 !important; }
#header #menu ul li a {
  float: none !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: .5rem .9rem !important;
  background: var(--accent-bg) !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  color: var(--accent-dk) !important;
  font: 600 .82rem/1.2 inherit !important;
  letter-spacing: .01em;
  text-transform: none;
  transition: background .12s ease, color .12s ease;
}
#header #menu ul li a:hover {
  background: var(--accent) !important;
  color: #fff !important;
  border-color: transparent !important;
}

#content {
  width: auto !important;
  border: none !important;
  margin: 0 !important;
  font: inherit !important;
  /* Justified text on a narrow column opens rivers of whitespace and breaks
   * badly on phones, where a line may hold only a few words. */
  text-align: left !important;
}
#content div, #content p { padding: 0 !important; }

/* ---------------------------------------------------------------- typography */

.content_title {
  font-size: clamp(1.6rem, 3.2vw, 2.15rem);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.015em;
  margin: 0 0 1rem;
}
.content_subtitle {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  line-height: 1.3;
  font-weight: 650;
  margin: 2.2rem 0 .7rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--rule);
}
.content_subsection {
  font-size: 1.05rem;
  font-weight: 650;
  color: var(--ink-soft);
  margin: 1.6rem 0 .5rem;
}
/* The reading-width cap applies to PROSE only.
 *
 * `content_paragraph` is used on two quite different things: real paragraphs
 * (<p>) and wrapper <div>s that contain tables and lists. Capping both put the
 * whole bibliography inside a 621px column with 500px of empty space beside
 * it, which is what made the publications page look broken in the new layout. */
p.content_paragraph { margin: 0 0 .55rem; max-width: var(--measure); }
div.content_paragraph { margin: 0 0 .55rem; max-width: none; }
.content_story > p { max-width: var(--measure); }
/* Lists here are project and venue entries, not prose. Holding them to a
 * 72ch reading measure left half the page empty beside them. */
.content_story > ul { max-width: 100ch; }
.content_story ul { padding-left: 1.15rem; }
.content_story li { margin: .3rem 0; }

a { color: var(--accent); text-decoration-thickness: .06em; text-underline-offset: .15em; }
a:hover { color: var(--accent-dk); }

/* The inline block sets `#content a { font-style: italic; text-decoration:
 * none }`, so every link on the site rendered as italic blue with no
 * underline - the single biggest reason the pages still read as the old
 * design. These selectors have to carry the #content prefix to outrank it. */
#content a {
  color: var(--accent);
  font-style: normal;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent);
}
#content a:hover { color: var(--accent-dk); text-decoration-color: currentColor; }
/* Icon buttons and menu chips are not body links; they keep their own look. */
#content .p-links a, #content .bibmenu a, #content .p-det summary { text-decoration: none; }

#content .content_story .content_subsection {
  font-style: normal;
  font-size: 1.05rem;
  padding: 0;
}
#content .content_story .content_subtitle { padding: 0 0 .35rem; }

/* The footer was an 8px italic box outlined in black. */
#footer {
  border: none !important;
  border-top: 1px solid var(--rule) !important;
  width: auto !important;
  margin-top: 2.5rem !important;
  font: .78rem/1.5 inherit !important;
  font-style: normal !important;
  color: var(--ink-faint);
}
#footer p { padding: .7rem 0 !important; }
#footer a { color: var(--ink-faint); }

/* Long tables and code must scroll inside themselves; the page itself must
 * never scroll sideways. */
.content_story table, .rTable { max-width: 100%; overflow-x: auto; display: block; }

/* Nothing may be wider than its container. An old three-column div-table on
 * the people page could not narrow past its content, so it set the width of
 * the whole document on a phone and pushed the nav and body text off-screen.
 * A long unbroken URL does the same thing. */
img, svg, video, iframe { max-width: 100%; height: auto; }
#content, #all { overflow-wrap: anywhere; }
#content table { max-width: 100%; }

/* ------------------------------------------------------------ people section */

.p-tbl { border-collapse: separate; border-spacing: 0; }
.p-tbl td { border-bottom: 1px solid var(--rule-soft); }

/* Card grid. The old layout put five columns on one row - name, dates, a
 * paragraph of interests, a papers disclosure and icons - so every column was
 * cramped and the middle one ran long. A card gives each person a photo, a
 * heading, one line of prose and a row of links, and reflows to one column on
 * a phone without a horizontal scrollbar. */
.p-grid {
  list-style: none;
  margin: .6rem 0 1.6rem;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}
.p-card {
  display: grid;
  grid-template-columns: 68px 1fr;
  gap: .85rem;
  padding: .9rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--bg);
  align-items: start;
}
.p-card:hover { border-color: #cfd6df; }
.p-photo {
  width: 68px; height: 68px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-soft);
  display: block;
}
.p-photo--none {
  display: grid; place-items: center;
  font-weight: 650; color: var(--ink-faint);
  font-size: 1.15rem; letter-spacing: .02em;
}
.p-body { min-width: 0; }
.p-name { font-weight: 650; font-size: 1rem; line-height: 1.25; }
.p-name a { text-decoration: none; }
.p-name a:hover { text-decoration: underline; }
.p-role { color: var(--ink-faint); font-size: .84rem; margin-top: .1rem; }
.p-bio  { font-size: .875rem; color: var(--ink-soft); margin-top: .35rem; }
.p-next { font-size: .84rem; color: var(--ink-faint); margin-top: .25rem; }
.p-links { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.p-links .p-ico {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  color: var(--ink-faint);
  opacity: 1;
  margin: 0;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.p-links .p-ico:hover {
  color: #fff; background: var(--accent); border-color: var(--accent);
}
.p-ico svg { fill: currentColor; width: 14px; height: 14px; }

/* Visually hidden, still read aloud.
 *
 * Each icon link carries <span class="p-sr">LinkedIn</span> so it has an
 * accessible name rather than being an anonymous glyph. Without this rule that
 * text renders inside a 26px box and every icon overlaps its neighbour - which
 * is exactly what happened when the rule was left behind during the move from
 * the generator's inline <style> to this file. Do not delete it because the
 * text "looks invisible anyway": it is invisible BECAUSE of this rule.
 * clip-path is the modern form; clip is kept for older engines. */
.p-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.p-det summary { font-size: .84rem; margin-top: .45rem; }
.p-pl { font-size: .84rem; }
.p-pl li { margin: .15em 0; }
.p-yr { color: var(--ink-faint); }
.p-more { color: var(--ink-faint); font-style: italic; list-style: none; }
.p-kw { color: var(--ink-faint); font-style: normal; }

/* Retained for any page still rendering the older table markup. */
.p-nm { font-weight: 600; }
.p-when, .p-meta { color: var(--ink-soft); font-size: .9rem; }

/* --------------------------------------------------------- software section */

.sw-list > li { margin: .7rem 0; }
.sw-years { color: var(--ink-faint); }
.sw-papers summary { color: var(--accent); }

/* ------------------------------------------------------------- bibliography */

/* bibtexbrowser's own markup, restyled to match the rest of the site.
 * It shipped a 1px black box around the whole list and rust-orange year bars
 * with white text, which is the "old site" look on the publications page. */
table.result {
  width: 100%;
  border: none !important;
  border-collapse: collapse;
  margin: .3rem 0 1.6rem;
}
table.result td { border: none; vertical-align: top; }

/* Year separator row. */
td.theader, .theader {
  background: var(--bg-soft) !important;
  color: var(--ink) !important;
  font-weight: 650;
  font-size: .8rem;
  letter-spacing: .06em;
  padding: .45rem .6rem !important;
  border-top: 1px solid var(--rule) !important;
  border-bottom: 1px solid var(--rule) !important;
}

td.bibref {
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding: .45rem .55rem .45rem .1rem;
  font-size: .82rem;
}
td.bibitem { padding: .45rem 0; line-height: 1.5; }
tr:hover td.bibitem, tr:hover td.bibref { background: var(--bg-soft); }
.bibtitle { font-weight: 600; color: var(--ink); }
.bibauthor { color: var(--ink-soft); }
.bibbooktitle { font-style: italic; color: var(--ink-soft); }
.bibmenu { white-space: nowrap; }
.bibmenu a {
  font-size: .74rem;
  font-style: normal;
  margin-right: .25rem;
  padding: .05rem .3rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  text-decoration: none;
  color: var(--ink-faint);
}
.bibmenu a:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* -------------------------------------------------------------- breakpoints */

@media (max-width: 900px) {
  #header #menu ul li a { padding: .45rem .7rem !important; font-size: .78rem !important; }
}

@media (max-width: 620px) {
  body { font-size: 15px; }
  #all { padding: .85rem !important; }
  .p-grid { grid-template-columns: 1fr; }
  .content_subtitle { margin-top: 1.6rem; }
  /* The bibliography renders as a table; on a phone the label column would
   * squeeze the citation into a sliver, so stack them. */
  table.result, table.result tbody, table.result tr, table.result td { display: block; width: auto; }
  td.bibref { padding: .4rem 0 0; }
  td.bibitem { padding: 0 0 .8rem; border-bottom: 1px solid var(--rule-soft); }
}

@media print {
  #header, #menu { display: none; }
  #all { max-width: none !important; }
  a { color: inherit; text-decoration: none; }
}