/* ============================================================ v1 canonical — research page template Decisions: V1/V2 responsive venue strip, Fred-blue TL;DR by default, per-page accent switch (5 colors matching blog callouts), secondary author links + tertiary affiliation links, full-box TL;DR (no stripe). ============================================================ */ * { box-sizing: border-box; margin: 0; padding: 0; } :root { --background: #ffffff; --foreground: oklch(0.145 0 0); --muted-foreground: #565666; --border: rgba(0, 0, 0, 0.10); --border-strong: rgba(0, 0, 0, 0.22); /* The 5 accents — match the blog callout palette. The page picks one via `data-accent="blue|purple|green|amber|grey"` on . */ --accent-blue-bg: #ebf2fc; --accent-blue-border: #b5cef0; --accent-blue-ink: #1e5fb8; --accent-purple-bg: #f3eefe; --accent-purple-border: #c8b6f8; --accent-purple-ink: #5a3acc; --accent-green-bg: #f0fff4; --accent-green-border: #9ae6b4; --accent-green-ink: #276749; --accent-amber-bg: #fff3cd; --accent-amber-border: #ffc107; --accent-amber-ink: #b35400; --accent-grey-bg: #f5f5f5; --accent-grey-border: #ddd; --accent-grey-ink: #565666; --system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; --crimson-text: 'Crimson Text', Georgia, serif; } /* The accent resolution. body[data-accent="blue"] sets which set is "live". */ body[data-accent="blue"] { --tldr-bg: var(--accent-blue-bg); --tldr-border: var(--accent-blue-border); --tldr-ink: var(--accent-blue-ink); } body[data-accent="purple"] { --tldr-bg: var(--accent-purple-bg); --tldr-border: var(--accent-purple-border); --tldr-ink: var(--accent-purple-ink); } body[data-accent="green"] { --tldr-bg: var(--accent-green-bg); --tldr-border: var(--accent-green-border); --tldr-ink: var(--accent-green-ink); } body[data-accent="amber"] { --tldr-bg: var(--accent-amber-bg); --tldr-border: var(--accent-amber-border); --tldr-ink: var(--accent-amber-ink); } body[data-accent="grey"] { --tldr-bg: var(--accent-grey-bg); --tldr-border: var(--accent-grey-border); --tldr-ink: var(--accent-grey-ink); } /* Default if no accent set on body */ body:not([data-accent]) { --tldr-bg: var(--accent-blue-bg); --tldr-border: var(--accent-blue-border); --tldr-ink: var(--accent-blue-ink); } html, body { background: var(--background); color: var(--foreground); font-family: var(--system); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Default anchor — tertiary link (foreground, no underline at rest, hover-reveal underline) */ a { color: var(--foreground); text-decoration: none; } a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: rgba(0, 0, 0, 0.4); } /* ============================================================ Hero ============================================================ */ .hero { max-width: 1024px; margin: 56px auto 0; padding: 0 6vw; text-align: center; } /* VENUE STRIP — responsive: V1 (single line) on ≥720px, V2 (two-line) below */ .venue-strip { font-family: var(--system); margin-bottom: 24px; line-height: 1.55; } /* Desktop: single line, Niloofar-style */ @media (min-width: 720px) { .venue-strip { font-size: 13.5px; color: var(--muted-foreground); line-height: 1.55; } .venue-strip__name { color: var(--foreground); font-weight: 500; } .venue-strip__meta { display: inline; } .venue-strip__meta-pre { display: inline; } /* Separator dots: darker than .25 so they actually read on screen. The previous .25 was nearly invisible against the surrounding text. */ .venue-strip__meta-pre::before { content: ' · '; color: rgba(0,0,0,.55); margin: 0 1px; font-weight: 600; } .venue-strip__sep { color: rgba(0,0,0,.55); margin: 0 7px; font-weight: 600; } .venue-strip__item { display: inline; } } /* Mobile: two lines hierarchy; meta items wrap as nowrap chunks so "Vol 13, S4" can't split mid-element. The whole meta line is centered (text-align inherited from .hero), so wrapped chunks stack centered rather than left-aligning. */ @media (max-width: 719px) { .venue-strip { line-height: 1.4; } .venue-strip__name { display: block; font-size: 14px; font-weight: 500; color: var(--foreground); letter-spacing: -.005em; } .venue-strip__meta { display: block; font-size: 12.5px; color: var(--muted-foreground); margin-top: 4px; } .venue-strip__meta-pre { display: none; } .venue-strip__sep { color: rgba(0,0,0,.55); margin: 0 7px; font-weight: 600; } /* Items wrap freely. Earlier the rule was `white-space: nowrap` so multi-word short items (e.g. "Vol 13, S4") couldn't split mid-phrase — but that broke when an item was a long phrase like the FAccT proceedings name ("Proceedings of the 2026 ACM Conference on Fairness, Accountability, and Transparency"), which forced horizontal scroll on phones. If you ever need a multi-word short item to stay together, use a non-breaking space (` `) in the YAML for that pair. */ .venue-strip__item { display: inline; } } /* TITLE */ .hero h1 { font-family: var(--system); font-weight: 500; font-size: clamp(32px, 4.5vw, 50px); line-height: 1.1; letter-spacing: -.015em; color: var(--foreground); margin-bottom: 28px; max-width: 28ch; margin-left: auto; margin-right: auto; } /* SECONDARY LINKS — author byline (foreground + faint underline) */ .authors-line { font-family: var(--system); font-size: 16px; color: var(--foreground); margin-bottom: 6px; line-height: 1.55; } /* Each name+marks chunk: nowrap so two-word names ("Anna Sokol", "Tanay Nagar") can't split first/last across a line. inline-block makes the surrounding line break BETWEEN authors at the commas, not inside a name. Long affiliations don't live here — they're separately handled by .aff-item block-wrap in .aff-legend below. */ .author-name { display: inline-block; white-space: nowrap; } .authors-line a { color: var(--foreground); text-decoration: underline; text-decoration-color: rgba(0, 0, 0, 0.18); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color .15s ease; } .authors-line a:hover { text-decoration-color: var(--foreground); text-decoration-thickness: 1px; } .authors-line a sup { font-size: 10px; color: var(--muted-foreground); vertical-align: super; margin-left: 1px; } /* Equal-contribution / glyph legend. Letter-spacing intentionally NOT set (was 0.14em — caused stretched-out look on mobile). */ .eq-legend { font-family: var(--mono); font-size: 10.5px; color: var(--muted-foreground); margin-top: 8px; margin-bottom: 14px; } .eq-legend .glyph { color: var(--foreground); font-weight: 500; margin-right: 2px; } .eq-legend .sep { color: rgba(0,0,0,.3); margin: 0 10px; } /* Used only for short legend entries (e.g. "‡ Thesis advisor") where splitting a glyph from its short label looks awkward. NOT used on author names or affiliations — those must be allowed to wrap at word boundaries so long names/orgs don't force horizontal page overflow on narrow viewports (the ^{stays glued to its preceding word
naturally since ^{isn't a line-break opportunity). */
.nowrap,
.nowrap sup,
.nowrap a { white-space: nowrap; }

/* TERTIARY LINKS — affiliations.
Each affiliation on its own line, centered. The inline · separators
emitted by the layout are hidden because vertical stacking doesn't
need them. Organizations: no underline at rest, hover-reveal. */
.aff-legend {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
font-family: var(--system); font-size: 13.5px;
color: var(--muted-foreground); margin-bottom: 36px; line-height: 1.55;
text-align: center;
}
.aff-legend sup { font-size: 9.5px; vertical-align: super; margin-right: 2px; color: rgba(0,0,0,.4); }
/* Hide inline · separators — vertical stacking doesn't need them. */
.aff-legend > .sep { display: none; }
/* Each affiliation is a flex item; max-width:100% lets long org names
wrap at word boundaries instead of forcing horizontal page overflow.
display:block ensures the flex parent treats it as a single sized
child rather than letting the inline content set the intrinsic width. */
.aff-legend > .aff-item {
display: block;
max-width: 100%;
}
.aff-legend a {
color: var(--muted-foreground);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color .15s ease, border-color .15s ease;
}
.aff-legend a:hover {
color: var(--foreground);
border-bottom-color: rgba(0, 0, 0, 0.35);
text-decoration: none;
}

/* ============================================================
Buttons — ghost pill
============================================================ */
.actions { display: inline-flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 0; }
.btn-ghost {
font-family: var(--system); font-size: 13.5px; font-weight: 500;
color: var(--foreground); background: transparent;
padding: 8px 14px; border-radius: 999px;
border: 1px solid var(--border-strong);
text-decoration: none;
display: inline-flex; align-items: center; gap: 7px;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.btn-ghost:hover {
background: var(--foreground); color: var(--background); border-color: var(--foreground);
text-decoration: none;
}
/* Both FA (.fas) and Phosphor (.ph-fill / .ph) icons inherit font-size
from .btn-ghost. Set to 12px so all icons render at the same scale
regardless of which library they come from. */
.btn-ghost i { font-size: 12px; opacity: .85; }

/* Inline wordmark / lab-logo SVG inside a pill (rendered when YAML
uses the `logo:/path/to.svg` icon prefix in publications.yaml).
Sized to ~12px height to match the font-icon glyphs above; auto
width preserves aspect ratio. opacity matches font-icon treatment. */
.btn-ghost .pill-logo {
height: 12px;
width: auto;
opacity: .85;
vertical-align: middle;
}
/* On hover the pill inverts (dark bg, light text). The SVG is
filled with currentColor via a filter inversion so the wordmark
stays legible against the dark fill. */
.btn-ghost:hover .pill-logo { filter: invert(1); opacity: 1; }

/* "Coming soon" state — pending pills (empty url:) render with this
class instead of an href, so they're visually distinct from live
pills. Muted text + border, no hover treatment, no cursor pointer.
A trailing → arrow is appended in the layout to signal "headed
somewhere later." */
.btn-ghost.coming-soon {
color: var(--text-muted, #94897a);
border-color: var(--rule, #e5e5e5);
cursor: default;
opacity: 0.7;
}
.btn-ghost.coming-soon:hover {
background: transparent;
color: var(--text-muted, #94897a);
border-color: var(--rule, #e5e5e5);
}
.btn-ghost.coming-soon i,
.btn-ghost.coming-soon .pill-logo {
opacity: 0.6;
}
.btn-ghost.coming-soon:hover i,
.btn-ghost.coming-soon:hover .pill-logo {
opacity: 0.6;
filter: none;
}
.btn-ghost .coming-soon-arrow {
margin-left: 0.15em;
opacity: 0.65;
font-weight: 400;
}

/* ============================================================
Teaser figure — optional lead image rendered between the pills
row and the body. Acts as the visual lead-in to the abstract,
paralleling how academic papers often use a Figure 1 at the
top of the body. Centered, max-width matches the body column,
subtle rounded corners + shadow to lift it off the page. The
caption (figcaption) renders as muted italic, centered under
the image. Gated by `pub.teaser` in the layout so entries
without a teaser render the page exactly as before.
============================================================ */
.teaser {
/* Match the body column's max-width so the teaser and the
abstract beneath it form a single column on the page. */
max-width: calc(72ch + 320px);
margin: 56px auto 0;
padding: 0 6vw;
}
/* Hide the teaser on mobile. The figure is dense (tiny character
labels like "Maria_MIXED", legend text, axis labels) — at phone
width it scales below legibility and adds load time. The title,
pills, and abstract remain — the visual lead is desktop-only. */
@media (max-width: 719px) {
.teaser { display: none; }
/* When the teaser is hidden, the `.teaser + .body` rules don't
apply (no preceding teaser sibling), so the body's normal
`margin: 56px auto 0` rule takes over — no extra fix needed. */
}
.teaser img {
display: block;
width: 100%;
height: auto;
/* No border, no background, no shadow. A well-composed teaser
(axes, dots, labels, internal contrast) doesn't need chrome —
added borders compete with the figure's own internal edges.
The surrounding page whitespace IS the frame. Modest corner
radius softens the corners without making the image look like
a card. */
border-radius: 6px;
}
.teaser figcaption {
margin: 12px auto 0;
max-width: 70ch;
font-family: var(--system);
font-size: 14px;
font-style: italic;
line-height: 1.5;
color: var(--muted-foreground, #6a6760);
text-align: center;
}

/* ============================================================
Body — abstract, sections, BibTeX
============================================================ */
.body { max-width: calc(72ch + 320px); margin: 56px auto 0; padding: 0 6vw 0; }
/* Soft section break between the teaser and the body. Without the
caption, the figure butts close to the Abstract heading; a short
centered hairline acts as a visual handoff — "figure ends, new
section starts" — without introducing visible chrome around the
image itself. The hairline is on the teaser's ::after so the
markup stays clean: no extra in the layout. */
.teaser { position: relative; }
.teaser::after {
content: "";
display: block;
width: 60px;
height: 1px;
margin: 48px auto 0;
background: rgba(42, 39, 34, 0.18);
}
/* Tighten the body's top margin slightly since the hairline + its
own 48px margin above provide the section-break breathing room. */
.teaser + .body { margin-top: 40px; }
.body h2 {
font-family: var(--system); font-weight: 600; font-size: 22px;
line-height: 1.2; letter-spacing: -.012em;
color: var(--foreground); margin: 40px 0 14px;
}
.body h2:first-child { margin-top: 0; }
.body p {
font-family: var(--system); font-size: 17px; line-height: 1.65;
color: var(--foreground); margin-bottom: 16px;
}

/* PRIMARY links inside body prose — paper refs, external citations */
.body p a {
color: var(--foreground);
text-decoration: underline;
text-decoration-color: rgba(0, 0, 0, 0.25);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: text-decoration-color .15s ease;
}
.body p a:hover { text-decoration-color: var(--foreground); }

/* TL;DR — accent-themed, full-box (matches blog callout pattern) */
.tldr {
background: var(--tldr-bg);
border: 1px solid var(--tldr-border);
border-radius: 6px;
padding: 14px 18px;
font-family: var(--system); font-size: 15px;
color: var(--foreground);
margin-bottom: 18px; line-height: 1.55;
}
.tldr .lbl {
font-family: var(--mono); font-size: 10px;
letter-spacing: .22em; text-transform: uppercase;
color: var(--tldr-ink); margin-right: 8px;
}

/* BibTeX */
.bib-block {
background: rgba(0,0,0,.04); border: 1px solid var(--border);
border-radius: 6px; padding: 16px 20px;
font-family: var(--mono); font-size: 12.5px;
line-height: 1.6; color: var(--foreground);
position: relative; margin-top: 12px;
/* overflow-x lives on the inner .bib-scroll wrapper so the copy
button (absolutely positioned on .bib-block) stays anchored when
the user scrolls long BibTeX entries on mobile. */
}
.bib-block .bib-scroll {
overflow-x: auto;
/* Reserve space on the right edge so the BibTeX text never tucks
under the absolutely-positioned copy button at top:10px right:12px. */
padding-right: 64px;
}
.bib-block pre { font: inherit; color: inherit; }
.bib-block .copy {
position: absolute; top: 10px; right: 12px;
font-family: var(--mono); font-size: 11px;
background: #fff; border: 1px solid var(--border);
border-radius: 4px; padding: 4px 10px;
color: var(--muted-foreground); cursor: pointer;
text-decoration: none;
display: inline-flex; align-items: center; gap: 5px;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.bib-block .copy:hover {
background: var(--foreground); color: var(--background); border-color: var(--foreground);
text-decoration: none;
}
.bib-block .copy.copied { background: #d4f0d4; color: #1a5a1a; border-color: #6cc06c; }
.bib-block .copy.copied::before { content: '✓'; margin-right: 2px; }

/* Acknowledgements */
.ack-section { max-width: 1024px; margin: 56px auto 0; padding: 0 6vw; }
.ack-section h2 {
font-family: var(--system); font-weight: 600; font-size: 22px;
line-height: 1.2; letter-spacing: -.012em;
color: var(--foreground); margin: 0 0 14px;
}
.ack-section p {
font-style: italic; color: var(--muted-foreground);
font-family: var(--crimson-text); font-size: 16.5px; line-height: 1.6;
max-width: none;
}

/* Footer */
.page-footer {
max-width: calc(72ch + 320px); margin: 80px auto 0;
padding: 24px 6vw 60px;
border-top: 1px solid var(--border);
font-family: var(--system); font-size: 13px;
color: var(--muted-foreground);
display: flex; justify-content: space-between; align-items: center;
flex-wrap: wrap; gap: 10px;
}
.page-footer a {
color: var(--muted-foreground);
text-decoration: none;
border-bottom: 1px solid var(--border);
transition: color .15s ease, border-color .15s ease;
}
.page-footer a:hover {
color: var(--foreground); border-color: var(--foreground);
text-decoration: none;
}}}