itself stays in normal flow so the
expanded pushes the page down instead of overlapping what follows.
It keeps the same triangle marker as Abstract, which is correct — both are
disclosures, while SSRN is a link and is marked with an arrow instead. */
.paper .paper-actions details.bib { position: static; margin: 0; font-size: 12px; line-height: 1; }
.paper-actions details.bib > summary { position: absolute; top: 0; left: 200px; }
.paper-actions details.bib > summary::after {
content: "";
position: absolute;
left: -15px;
top: 1px;
height: 11px;
border-left: 1px solid var(--rule);
}
/* Optical, not geometric: with equal measured gaps the row still read as though
SSRN sat closer to ABSTRACT, because the trailing arrow is light ink and the
eye takes SSRN's edge to be the "N". Tucking the arrow in (3px -> 1px) keeps
it reading as part of the word, and SSRN moves 4px right to compensate.
Scoped to .act-link so the hero links keep their own spacing. */
.act-link .ext-ic { margin-left: 1px; }
.bibtex {
margin: 14px 0 0;
padding: 12px 14px;
background: var(--band);
border-left: 2px solid var(--accent-soft);
font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
font-size: 12px;
line-height: 1.65;
color: var(--ink);
/* pre-wrap, not pre: newlines are still preserved so the entry copies out
verbatim, but long lines wrap instead of demanding a sideways scroller.
The earlier `pre` + overflow-x:auto made a horizontally scrollable box
inside the page, which iOS answers by zooming the whole document out.
overflow-wrap:anywhere drops min-content to about one character, so a long
author list can never widen the column no matter how narrow the screen. */
white-space: pre-wrap;
overflow-wrap: anywhere;
-webkit-text-size-adjust: 100%;
}
.confs {
margin: 9px 0 0;
font-family: var(--sans);
font-size: 12.5px;
line-height: 1.6;
color: var(--muted);
}
/* Same treatment as .kw-label inside the abstract: both are labelled lists, so
the signpost recedes to a small letterspaced cap and the content carries the
line. No colon, matching KEYWORDS and RESEARCH INTERESTS. */
.conf-label {
font-family: var(--sans);
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-right: 9px;
}
.coverage { margin: 9px 0 0; font-size: 15px; }
.areas {
margin: 10px 0 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.area-tag {
font-family: var(--sans);
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
border: 1px solid var(--band-rule);
border-radius: 3px;
padding: 2px 8px;
}
.paper details { margin: 10px 0 0; }
.paper summary {
display: inline-flex;
align-items: center;
gap: 8px;
cursor: pointer;
list-style: none;
font-family: var(--sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--accent);
transition: color 0.15s ease;
}
.paper summary::-webkit-details-marker { display: none; }
.paper summary::before {
content: "";
width: 0;
height: 0;
border-left: 5px solid currentColor;
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
transition: transform 0.15s ease;
}
.paper details[open] summary::before { transform: rotate(90deg); }
.paper summary:hover { color: color-mix(in srgb, var(--accent) 72%, #000); }
.abstract {
margin: 12px 0 0;
padding: 1px 0 1px 20px;
border-left: 2px solid var(--accent-soft);
/* one step below body (16.5) and one above keywords (14.5) */
font-size: 15px;
/* 1.65, tightened from 1.75: saves roughly a line of depth per abstract while
still giving justified Bitter the leading its x-height needs. 1.5 was tried
and reads packed in paragraphs this long. */
line-height: 1.65;
text-align: justify;
}
.keywords {
margin: 0;
padding: 10px 0 1px 20px;
border-left: 2px solid var(--accent-soft);
/* stated rather than inherited: .paper-actions collapses its line-height to
align the SSRN link, and keywords must not inherit that */
line-height: 1.65;
font-size: 14.5px;
font-style: italic;
color: var(--muted);
}
.kw-label {
font-family: var(--sans);
font-style: normal;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-right: 9px;
}
/* --- CV ------------------------------------------------------------------ */
.cv-frame {
width: 100%;
height: 82vh;
margin-top: 40px;
border: 1px solid var(--rule);
}
/* --- Footer -------------------------------------------------------------- */
.site-footer {
margin-top: 72px;
/* UGA Arch photo behind a dark-navy overlay */
background-image:
linear-gradient(rgba(4, 24, 50, 0.89), rgba(4, 24, 50, 0.94)),
url("../images/arch.jpg");
background-size: cover;
background-position: center 38%;
color: #dbe4ee;
}
.footer-inner {
max-width: 1140px;
margin: 0 auto;
padding: 52px 28px;
font-family: var(--sans);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px 20px;
}
.footer-inner a { color: inherit; }
.footer-credit {
font-size: 10px;
letter-spacing: 0.03em;
text-transform: none;
opacity: 0.78;
}
/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 900px) {
.info-grid { grid-template-columns: 1fr; gap: 0; }
.info-col { padding: 26px 0 0; }
.info-col + .info-col {
margin-top: 26px;
border-top: 1px solid var(--band-rule);
}
.info-col + .info-col::before { display: none; }
/* minmax(0,1fr), not 1fr: a bare 1fr floors at min-content, so one long
unbreakable line (a BibTeX author list) widens the track, the document
scrolls sideways, and iOS answers by zooming the whole page out. */
.page-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
.side-nav {
position: static;
display: flex;
flex-wrap: wrap;
gap: 0 28px;
border-bottom: 1px solid var(--rule);
}
.side-nav a { border-top: 0; border-bottom: 0; padding: 10px 0; }
.side-nav a:last-child { border-bottom: 0; }
.side-nav .num { display: inline; margin-right: 6px; }
}
@media (max-width: 720px) {
/* Tighter type + rhythm so more content fits a phone screen. Conferences
(11px) and area tags (9px) are deliberately NOT shrunk further — they are
already at the smallest comfortable size. */
body { font-size: 13.5px; line-height: 1.45; }
.brand-affil { display: none; }
.header-bar { padding: 12px 20px; }
/* Nav + logo become direct flex items of the bar: the logo sits
top-right beside the name, and the nav drops to its own full-width
row below. */
.header-right { display: contents; }
.brand { order: 1; }
.header-logo-link { order: 2; }
.site-nav { order: 3; flex-basis: 100%; gap: 4px 20px; }
.header-logo { height: 32px; }
/* Bio and abstracts stay justified on phones: at the reduced mobile sizes a
334px column fits ~50-57 characters, enough for justification to set
cleanly. The research-interests line is excluded — it is a comma list of
long proper nouns, so it has too few break points and gaps open up. */
.about p { text-align: justify; }
.hero-interests { text-align: left; }
.hero-grid {
flex-direction: column;
align-items: stretch;
text-align: left;
gap: 0;
padding: 30px 24px 36px;
}
.portrait-wrap { width: 100%; }
.hero-text { width: 100%; padding: 18px 0 0; }
.hero-name { font-size: 30px; }
.hero-affil { font-size: 12.5px; }
/* Profile links as a 2x2 grid with the pipes aligned in a middle column.
The middle separator drops out so 4 links + 2 pipes form two clean rows. */
.hero-text .hero-links {
display: grid;
grid-template-columns: auto auto auto;
justify-content: start;
column-gap: 10px;
row-gap: 10px;
font-size: 11.5px;
}
.hero-text .hero-links .sep { margin: 0; }
.hero-text .hero-links .sep-mid { display: none; }
/* Inner-page hero link row (SSRN | Scholar | Official Profile): sized and
tracked down so all three fit one line at 390px instead of wrapping.
Scoped to .page-hero so the home hero's 2x2 grid above is untouched. */
.page-hero .hero-links { font-size: 11.5px; letter-spacing: 0.06em; }
.page-hero .hero-links .sep { margin: 0 5px; }
.hero-name { font-size: 24px; }
.page-name { font-size: 23px; }
.section-head { font-size: 17px; padding-bottom: 7px; margin-bottom: 12px; }
.side-nav a { font-size: 13px; }
.cv-frame { height: 70vh; }
/* Teaching: logo drops below the courses instead of squeezing them. */
.inst-row { flex-direction: column; align-items: flex-start; gap: 14px; }
.inst-logo { width: 76px; height: 76px; justify-content: flex-start; }
.page-main.teaching-sections section + section { margin-top: 48px; }
/* Teaching's in-page nav is redundant on a phone (both sections are a thumb
away, and the page barely scrolls). Research keeps its own side-nav. */
.side-nav-optional { display: none; }
/* Research list: tighter entries so more papers fit per screen. */
/* These carry explicit desktop sizes, so the body rule above doesn't reach
them — they must be listed here or they stay desktop-sized on a phone. */
.info-col address { font-size: 13.5px; line-height: 1.6; }
.contact-ic svg {
width: 13px;
height: 13px;
margin-top: calc((1.6em - 13px) / 2); /* matches the line-height above */
}
.coverage { font-size: 12.5px; }
/* Roomier gap between entries — with area tags hidden below, each block is
shorter, so the extra separation is what keeps papers reading as discrete. */
.paper { margin: 0 0 40px; }
/* Slightly negative tracking + the wider gutter below buy ~20px of column,
enough for one more title to land on a single line without shrinking the
type. Titles over ~65 characters cannot fit at any readable size. */
.paper h3 { font-size: 13.5px; line-height: 1.35; letter-spacing: -0.015em; }
.wrap { padding: 0 18px; }
/* Area tags are hidden on phones: at 9px the boxes wrapped to two or three
rows per paper and read as clutter. Desktop keeps them. */
.areas { display: none; }
/* 12px: same size as the abstract, so byline/venue are told apart by style
rather than size — serif regular for authors, italic accent for status,
italic semibold for the journal name. */
.authors,
.status { font-size: 12px; }
/* The ABSTRACT label keeps its 12px size on phones, so the 128px offset still
lands correctly; only the link's own type shrinks. */
/* No mobile override for .act-link: it sits beside ABSTRACT, which stays at
12px on phones, so the two must match. (It was 11px only while the link was
appended to the journal line, to keep that citation on one row.) */
/* BibTeX is hidden on phones, like the area tags above: a .bib entry is only
useful next to a LaTeX install, so on a phone it is a wide monospace block
that earns nothing. Hiding it also removes the third label from the action
row, leaving the cleaner ABSTRACT | SSRN pair. The DOI (paper title) and
SSRN link still reach everything the entry describes. */
.paper-actions details.bib { display: none; }
/* Indent trimmed to claw back column width for the justified text. */
.abstract {
font-size: 12px;
line-height: 1.5;
text-align: justify;
padding-left: 12px;
}
.keywords { font-size: 11.5px; padding-left: 12px; }
.confs {
font-size: 11px;
line-height: 1.5; /* floor — do not shrink */
text-align: justify;
}
/* The label sits inside a justified line, so the browser stretches its own
letter gaps as well as the word gaps — at desktop tracking it reads far
wider on a phone than the 0.1em alone would suggest. Tighter, and a clear
step below the 11px venue text so it still reads as subordinate. */
.conf-label { font-size: 9.5px; letter-spacing: 0.03em; }
.area-tag { font-size: 9px; } /* floor — do not shrink */
.hero-interests { font-size: 12px; }
.hero-interests strong { font-size: 10px; margin-bottom: 5px; }
/* Diamond bullets: the desktop rule hardcodes top:14px for 16.5px/1.65 text,
which sits too low at mobile sizes. Derive it instead so the diamond
centres on the first line: padding-top + half the line box. Because the
offset is in em it follows any font-size change here automatically. */
.diamond-list li { font-size: 12.5px; padding: 3px 0 3px 18px; }
.diamond-list li::before { top: calc(3px + (1.45em - 7px) / 2); }
/* Courses stack one per line on a phone, so the diamonds form a clean column
instead of an uneven 2-then-1 wrap. */
.teaching-sections .diamond-list { display: block; }
.about p { margin: 0 0 13px; }
}
/* --- Print ----------------------------------------------------------------- */
@media print {
.site-nav, .skip-link { display: none; }
.abstract { border-left: 0; padding: 0; }
.keywords { border-left: 0; padding: 10px 0 0; }
.area-tag { background: none; }
.site-footer { background: none; color: var(--muted); }
}