/* ydvir.org
   One face, EB Garamond roman, with real small caps and old-style figures. No italics.
   A spruce sidebar carries identity and navigation, brass marks where you are:
   the page tabs at its top switch pages; the rail below lists this page's sections. */

/* ------------------------------------------------------------------ fonts */
/* EB Garamond (OFL): static roman instances with smcp/c2sc/onum kept. No italic is loaded.
   font-display: swap. build.py preloads the latin files, so on a first visit the text is drawn
   in the fallback only until they arrive and then switches to EB Garamond; from the second page
   on the fonts come from the cache before the first paint, so nothing reflows. */
@font-face {
  font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/eb-garamond-latin-400-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/eb-garamond-latin-ext-400-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "EB Garamond"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/eb-garamond-latin-500-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond"; font-style: normal; font-weight: 500; font-display: swap;
  src: url(fonts/eb-garamond-latin-ext-500-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "EB Garamond"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/eb-garamond-latin-600-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "EB Garamond"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/eb-garamond-latin-ext-600-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ----------------------------------------------------------------- tokens */
:root {
  --serif: "EB Garamond", Garamond, "Iowan Old Style", Georgia, serif;

  --bg: #f7f8f6;
  --ink: #1a2421;
  --muted: #56645e;
  --rule: #d5dedb;
  --link: #1b5a4e;
  --link-hover: #0f3d34;
  --tint: #ecf2ef;
  --brass-ink: #85621f;   /* brass, darkened for text on the light page */
  --focus: #a77c1f;

  --side-bg: #183f38;
  --side-ink: #f1f5f3;
  --side-muted: #aac5bd;
  --side-rule: #2f5c53;
  --brass: #e0c27a;

  --side-w: 20rem;
  --measure: 41rem;

  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1715;
    --ink: #dde6e2;
    --muted: #97aaa3;
    --rule: #26352f;
    --link: #8fd0bd;
    --link-hover: #bfe8db;
    --tint: #16221f;
    --brass-ink: #e0c27a;
    --focus: #e0c27a;
    --side-bg: #12302a;
    --side-ink: #eef4f2;
    --side-muted: #9fbcb3;
    --side-rule: #28504a;
    --brass: #e0c27a;
    color-scheme: dark;
  }
}
/* [data-theme] is never set by this site (it follows prefers-color-scheme); the blocks exist for
   hosts that force a scheme by setting it on <html>, such as the preview host. */
:root[data-theme="dark"] {
  --bg: #0f1715;
  --ink: #dde6e2;
  --muted: #97aaa3;
  --rule: #26352f;
  --link: #8fd0bd;
  --link-hover: #bfe8db;
  --tint: #16221f;
  --brass-ink: #e0c27a;
  --focus: #e0c27a;
  --side-bg: #12302a;
  --side-ink: #eef4f2;
  --side-muted: #9fbcb3;
  --side-rule: #28504a;
  --brass: #e0c27a;
  color-scheme: dark;
}

/* ------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  font-synthesis: none;               /* never fake an italic, bold or small caps */
  scroll-padding-top: 1.5rem;
}
@media screen { html { scrollbar-gutter: stable; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.25rem;
  line-height: 1.55;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  font-variant-numeric: oldstyle-nums proportional-nums;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
p, ul, ol, dl, dd, h1, h2, h3 { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; font-weight: 500; }
abbr[title] { text-decoration: none; }
/* No italics anywhere: user-agent italics are switched off, emphasis is a heavier roman. */
em, i, cite, address, dfn, var { font-style: normal; }
em { font-weight: 500; }
strong, b { font-weight: 600; }

a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: color-mix(in srgb, currentColor 38%, transparent); }
a:hover { color: var(--link-hover); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }

.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: 0; transform: translateY(-110%); z-index: 50; background: var(--bg); color: var(--ink); padding: .5rem .9rem; }
.skip:focus { top: 1rem; transform: none; }

/* small caps: names, navigation, headings and labels */
.name, .site-nav a, main h2, .gut-label, .toc-h, .gutter .g1, .quick, .kind, .doc, .crumb,
.facts dt, .kv dt, .mat, .cv-name, .page-head h1, .courses-h, .lang-k {
  font-variant-caps: small-caps; letter-spacing: .035em;
}
.mat-type, .doc-meta, .quick, .gutter .g1 { font-variant-caps: all-small-caps; letter-spacing: .07em; }

/* semantic brackets ⟦ ⟧ around the name */
.sb { display: inline-block; height: 1em; width: .33em; vertical-align: -.14em; color: var(--brass); flex: none; }
.sb-l { margin-right: .14em; }
.sb-r { margin-left: .14em; }

/* --------------------------------------------------------------- sidebar */
.side { background: var(--side-bg); color: var(--side-ink); }
.side a { color: inherit; text-decoration: none; }
.side :focus-visible { outline-color: var(--brass); }

/* Page tabs: the site navigation, the horizontal twin of the section rail below. Labels
   above one thin line; the current page is marked by a brass segment on the line, drawn by
   its own element (.tab-mark) so that a page change can glide it to the new tab. */
.site-nav { padding: .9rem 2rem 0; }
.site-nav ul { display: flex; border-bottom: 1px solid var(--side-rule); }
.site-nav ul { flex-wrap: wrap; }   /* with very large fonts a tab moves to a second row rather than widen the band */
.site-nav li { flex: 1 1 0; }
.site-nav a {
  position: relative; display: block; text-align: center;
  margin-bottom: -1px; padding: .35rem .3rem .45rem;
  border-bottom: 2px solid transparent;
  font-size: 1.12rem; line-height: 1.3; font-weight: 500; color: var(--side-muted);
}
.site-nav a:hover { color: var(--side-ink); border-bottom-color: var(--side-muted); }
.site-nav a[aria-current] { color: var(--side-ink); }
.tab-mark { position: absolute; left: 0; right: 0; bottom: -2px; border-top: 2px solid var(--brass); }

.portrait {
  object-fit: cover; border-radius: 50%;
  box-shadow: 0 0 0 2px var(--side-bg), 0 0 0 3.5px var(--brass);
}
.name { font-weight: 500; line-height: 1.1; color: var(--side-ink); }
.name > a, .name { display: flex; align-items: center; }
.name > a, .nm { min-width: 0; }
.nm { overflow-wrap: break-word; }
.side-sub { color: var(--side-muted); line-height: 1.38; text-wrap: balance; }
.side-sub a { white-space: nowrap; color: var(--side-ink); text-decoration: underline; text-decoration-color: var(--side-rule); text-underline-offset: .2em; }
.side-sub a:hover { text-decoration-color: var(--brass); }

.side-icons { display: flex; flex-wrap: wrap; }
.side-icons a { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; color: var(--side-muted); }
.side-icons a:hover { color: var(--side-bg); background: var(--brass); }
.side-icons svg { width: 1.15rem; height: 1.15rem; }

/* Section rail: links within this page. Roman text on a vertical rail, never small caps. */
.toc-h { font-size: 1rem; font-weight: 400; color: var(--side-muted); margin-bottom: .55rem; }
.side-nav ul { border-left: 1px solid var(--side-rule); }
.side-nav a {
  display: block; margin-left: -1px; padding: .24rem 0 .24rem 1rem;
  border-left: 2px solid transparent;
  font-size: 1.12rem; line-height: 1.3; color: var(--side-muted);
}
.side-nav a:hover { color: var(--side-ink); border-left-color: var(--side-muted); }
.side-nav a[aria-current] { color: var(--side-ink); border-left-color: var(--brass); }

/* One quiet line at the foot of the sidebar; on narrow screens the main footer says it instead. */
.side-foot { font-size: .95rem; line-height: 1.35; color: var(--side-muted); }

/* ---- desktop: fixed column on the left */
@media screen and (min-width: 60rem) {
  .side { position: fixed; inset: 0 auto 0 0; width: var(--side-w); overflow-y: auto; display: flex; flex-direction: column; }
  /* The identity block (photo, name, subtitle, icons) is centred on the column's axis;
     the section rail below it is a list and keeps a left edge, inset to the same margins. */
  .side-in { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 2.5rem 2rem 2rem; }
  .portrait { width: 9.5rem; height: 9.5rem; margin: 0 0 1.4rem; }
  .name { font-size: 2.05rem; justify-content: center; }
  .side-sub { margin-top: .55rem; font-size: 1.08rem; max-width: 15rem; }
  .side-icons { justify-content: center; margin-top: .9rem; }
  .side-nav { align-self: stretch; text-align: left; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--side-rule); }
  .side-foot { margin-top: auto; padding: 1rem 2rem 1.5rem; }   /* at the bottom, or after the rail when the column scrolls */
  .foot-priv { display: none; }
  .page { margin-left: var(--side-w); padding: 4.5rem clamp(2.5rem, 6vw, 6.5rem) 2.5rem; }
  .page > * { margin-left: auto; margin-right: auto; }
}
@media screen and (min-width: 60rem) and (max-height: 46rem) {
  .side-in { padding-top: 1.5rem; }
  .portrait { width: 6rem; height: 6rem; margin-bottom: 1rem; }
  .side-nav { margin-top: 1.3rem; padding-top: 1rem; }
  .side-nav a { padding-top: .15rem; padding-bottom: .15rem; }
  .side-foot { padding-top: .5rem; padding-bottom: 1rem; }
}

/* ---- narrow: a green band at the top; tabs above, section rail at its foot */
@media screen and (max-width: 59.99rem) {
  .site-nav { padding: .45rem 1rem 0; }
  .site-nav ul { max-width: 46rem; margin: 0 auto; }
  .site-nav a { font-size: 1.1rem; padding-top: .4rem; padding-bottom: .45rem; }
  .side-in {
    display: grid; grid-template-columns: 4.5rem minmax(0, 1fr);
    grid-template-areas: "pic name" "pic sub" "icons icons" "toc toc";
    column-gap: 1rem; align-items: start;
    padding: 1.15rem 1rem 1rem; max-width: 48rem; margin: 0 auto;
  }
  .portrait { grid-area: pic; width: 4.5rem; height: 4.5rem; margin-top: .25rem; }
  .name { grid-area: name; font-size: 1.6rem; margin-top: .25rem; }
  .side-sub { grid-area: sub; margin-top: .3rem; font-size: 1.02rem; }
  .side-icons { grid-area: icons; margin: .7rem 0 0 -.45rem; }
  .side-icons a { width: 2.6rem; height: 2.6rem; }
  .side-nav { grid-area: toc; margin-top: .75rem; padding-top: .8rem; border-top: 1px solid var(--side-rule); }
  .side-nav ul { display: flex; flex-wrap: wrap; gap: .45rem 1.15rem; border-left: 0; }
  .side-nav a { margin-left: 0; padding: .1rem 0 .1rem .6rem; border-left: 2px solid var(--side-rule); font-size: 1.08rem; }
  .toc-h { margin-bottom: .5rem; }
  .side-foot { display: none; }
  .page { padding: 2.5rem 1rem 2rem; max-width: 48rem; margin: 0 auto; }
  body { font-size: 1.1875rem; }
}
@media screen and (min-width: 36rem) and (max-width: 59.99rem) {
  .side-in, .page { padding-left: 2rem; padding-right: 2rem; }
  .site-nav { padding-left: 2rem; padding-right: 2rem; }
  .side-in { grid-template-columns: 5.25rem minmax(0, 1fr); grid-template-areas: "pic name" "pic sub" "pic icons" "toc toc"; }
  .portrait { width: 5.25rem; height: 5.25rem; }
  .side-icons { margin-top: .45rem; }
  .page { padding-top: 3rem; }
}

/* ------------------------------------------------------------ main column */
main { max-width: var(--measure); container-type: inline-size; }

@media screen { main > section + section { margin-top: 3.75rem; padding-top: 2.75rem; border-top: 1px solid var(--rule); } }
main h2 { font-size: 1.95rem; line-height: 1.15; margin-bottom: 1.25rem; color: var(--ink); }

.lead p { font-size: clamp(1.3rem, 1.15rem + .55vw, 1.45rem); line-height: 1.5; }
.lead p + p { margin-top: .9em; }
.lead a { color: inherit; text-decoration-color: color-mix(in srgb, var(--link) 60%, transparent); }
.lead a:hover { color: var(--link); }

/* Research interests: on the same two-column grid as the entries below. The label sits in
   the gutter like a venue; the interests are plain lines, nothing drawn around them. */
.interests { display: grid; grid-template-columns: 7rem minmax(0, 1fr); column-gap: 1.75rem; margin-top: 2.25rem; }
.gut-label { font-size: 1.04rem; line-height: 1.3; font-weight: 500; color: var(--muted); padding-top: .2rem; }
.interests li { font-size: 1.2rem; line-height: 1.4; }
.interests li + li { margin-top: .25rem; }
@container (max-width: 33.99rem) {
  .interests { grid-template-columns: minmax(0, 1fr); }
  .gut-label { padding-top: 0; margin-bottom: .3rem; }
}

/* Links to documents (other pages, the PDF): boxed, with a document icon. */
.doc-links { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.25rem; }
.doc {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: 1.1rem; line-height: 1.2; font-weight: 500;
  padding: .55rem 1rem .6rem .85rem; border-radius: 3px; text-decoration: none;
  background: var(--side-bg); color: var(--side-ink); border: 1px solid var(--side-bg);
}
.doc:hover { color: var(--side-ink); background: color-mix(in srgb, var(--side-bg) 80%, var(--ink)); }
.doc svg { width: 1.05rem; height: 1.05rem; flex: none; color: var(--brass); }
.doc-meta { margin-left: .55em; font-size: .9em; opacity: .75; font-weight: 400; }
.doc-quiet { background: transparent; color: var(--ink); border-color: var(--rule); }
.doc-quiet svg { color: var(--brass-ink); }
.doc-quiet:hover { background: var(--tint); color: var(--ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .doc:not(.doc-quiet) { background: #1f4d44; border-color: #2c6157; }
}
:root[data-theme="dark"] .doc:not(.doc-quiet) { background: #1f4d44; border-color: #2c6157; }

/* ---- entries: publications and presentations */
.entry { display: grid; grid-template-columns: 7rem minmax(0, 1fr); column-gap: 1.75rem; padding: 1.3rem 0; }
.entry + .entry { border-top: 1px solid var(--rule); }
.entries > .entry:first-child { padding-top: .2rem; }
.entry:target { background: linear-gradient(90deg, var(--tint), transparent 85%); }
.gutter { font-size: 1.04rem; line-height: 1.3; padding-top: .2rem; color: var(--muted); }
.gutter .g1 { display: block; color: var(--ink); font-weight: 500; }
.title { font-size: 1.3rem; font-weight: 500; line-height: 1.3; margin-bottom: .25rem; }
.title a { color: var(--ink); text-decoration-color: var(--rule); }
.title a:hover { color: var(--link); text-decoration-color: currentColor; }
.authors { font-size: 1.08rem; line-height: 1.45; }
.authors a, a.person { color: inherit; text-decoration-color: color-mix(in srgb, var(--muted) 60%, transparent); }
.authors a:hover { color: var(--link); }
.me { font-weight: 600; }
.venue { font-size: 1.08rem; color: var(--muted); line-height: 1.45; margin-top: .1rem; }
.kind { color: var(--ink); }
.with-paper a { white-space: nowrap; }
.award { display: flex; gap: .45rem; align-items: baseline; font-size: 1.08rem; color: var(--brass-ink); margin-top: .3rem; line-height: 1.35; }
.award-icon { flex: none; width: .95em; height: .95em; transform: translateY(.13em); }
.award a { color: inherit; }
.quick { display: flex; flex-wrap: wrap; gap: .15rem 1.15rem; margin-top: .45rem; font-size: 1.12rem; }
.quick a { text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--link) 35%, transparent); }
.quick a:hover { border-bottom-color: currentColor; }
.more { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--rule); color: var(--muted); font-size: 1.08rem; }

@container (max-width: 33.99rem) {
  .entry { grid-template-columns: minmax(0, 1fr); }
  .gutter { display: flex; gap: .4em; padding: 0 0 .2rem; }
  .gutter .g1 { display: inline; }
}

/* ---- contact: one row per way to reach me; icons in one column, texts from one edge */
.contact { border-top: 1px solid var(--rule); font-size: 1.12rem; }
.contact li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) auto; align-items: center; column-gap: .8rem; padding: .45rem 0; border-bottom: 1px solid var(--rule); }
.contact svg { width: 1.1rem; height: 1.1rem; color: var(--muted); }
.contact .cl-mail { font-size: 1.12em; }
.contact .cl-mail svg { color: var(--brass-ink); }
.contact .cl-handle { color: var(--muted); text-align: right; font-variant-numeric: lining-nums; overflow-wrap: anywhere; }

/* ---- footer */
.foot { max-width: var(--measure); margin-top: 5rem; padding-top: 1rem; border-top: 1px solid var(--rule); font-size: 1rem; color: var(--muted); }
.foot-priv { margin-top: .3rem; }

/* ------------------------------------------------------- research index */
.page-head { margin-bottom: 2.75rem; }
.page-head h1 { font-size: 2.6rem; line-height: 1.1; }
.page-intro { margin-top: .6rem; color: var(--muted); max-width: 34em; }

/* -------------------------------------------------------------- item page */
.crumb { font-size: 1.05rem; color: var(--muted); margin-bottom: 1rem; }
.crumb a { color: var(--link); text-decoration: none; }
.crumb a:hover { text-decoration: underline; }
.crumb-sep { margin: 0 .45em; color: var(--rule); }
.item-title { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.3rem); line-height: 1.18; margin-bottom: .9rem; }
.item .authors { font-size: 1.18rem; }
.item .venue { margin-top: .3rem; font-size: 1.12rem; }
.venue-long { color: var(--ink); }
.item .award { margin-top: .7rem; }
.item-head { padding-bottom: 2rem; }
.item main > article > section, .item > article > section { margin-top: 0; padding-top: 1.6rem; border-top: 1px solid var(--rule); }
.item section + section { margin-top: 2.25rem; }
.item h2 { font-size: 1.45rem; margin-bottom: .8rem; }
.materials { display: flex; flex-wrap: wrap; gap: .75rem 1rem; }
.materials li { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; }
.mat {
  display: inline-flex; align-items: center; gap: .55rem; padding: .45rem .9rem .5rem .75rem;
  border: 1px solid var(--rule); border-radius: 3px; text-decoration: none;
  font-size: 1.12rem; font-weight: 500; background: var(--bg);
}
.mat svg { width: 1rem; height: 1rem; color: var(--brass-ink); }
.mat:hover { border-color: var(--link); background: var(--tint); }
.mat-type { font-size: .9em; font-weight: 400; color: var(--muted); }
.mat-note { font-size: 1rem; color: var(--muted); padding-left: .1rem; }
.facts { display: grid; gap: .35rem; font-size: 1.1rem; }
.facts div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; }
.facts dt { color: var(--muted); padding-top: .05rem; }
.abstract p { hyphens: auto; }
.abstract p + p { margin-top: .8em; }
.related li { padding: .5rem 0; border-bottom: 1px solid var(--rule); }
.related li:first-child { border-top: 1px solid var(--rule); }
.related .rel-where { display: block; font-size: 1.02rem; color: var(--muted); }
@container (max-width: 30rem) { .facts div { grid-template-columns: minmax(0, 1fr); gap: 0; } .facts div + div { margin-top: .35rem; } }

/* ----------------------------------------------------------------- the CV */
.cv-bar {
  max-width: var(--measure); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem;
  padding-bottom: 1.25rem; margin-bottom: 2.5rem; border-bottom: 1px solid var(--rule);
}
.cv-kicker { color: var(--muted); font-size: 1.08rem; }

.cv-name { font-size: 2.6rem; line-height: 1.1; }
.cv .status { color: var(--muted); font-size: .9em; line-height: 1.3; }
.cv .honors { font-variant-caps: small-caps; letter-spacing: .03em; }
.cv-sub { margin-top: .25rem; font-size: 1.15rem; font-variant-caps: all-small-caps; letter-spacing: .06em; color: var(--muted); }
.cv-contact { display: flex; flex-wrap: wrap; gap: .2rem 1.5rem; margin-top: .7rem; font-size: 1.08rem; font-variant-numeric: lining-nums; }

@media screen {
  .cv-head { margin-bottom: 3rem; }
  .cv > .cv-section + .cv-section { margin-top: 3.25rem; padding-top: 2.5rem; border-top: 1px solid var(--rule); }
}
.cv-list > li + li { margin-top: 1.1rem; }
.cv-entry { display: grid; grid-template-columns: 7rem minmax(0, 1fr); grid-template-areas: "when what"; column-gap: 1.75rem; }
.cv-entry.compact + .cv-entry.compact { margin-top: .45rem; }
.cv-entry:target { background: linear-gradient(90deg, var(--tint), transparent 85%); }
.cv-entry .when { grid-area: when; color: var(--muted); font-size: 1.04rem; line-height: 1.4; padding-top: .12rem; }
.cv-entry .what { grid-area: what; line-height: 1.45; }
.lead-line strong, .lead-line .t { font-weight: 600; }
.lead-line .t { font-weight: 500; }
a.t { color: var(--ink); text-decoration-color: var(--rule); }
a.t:hover { color: var(--link); }
.cv .award { font-size: 1em; }
.kv { margin-top: .35rem; display: grid; gap: .15rem; font-size: 1.04rem; }
.kv div { display: grid; grid-template-columns: 6.75rem minmax(0, 1fr); gap: .9rem; }
.kv dt { color: var(--muted); }
.duties { margin-top: .3rem; }
.duties li, .courses li { position: relative; padding-left: 1rem; }
.duties li::before, .courses li::before { content: ""; position: absolute; left: .15rem; top: .62em; width: .3rem; height: .3rem; border-radius: 50%; background: var(--muted); }
.courses-h { font-weight: 500; margin-top: .6rem; }
.courses { margin-top: .6rem; }
.courses li + li { margin-top: .3rem; }
.cv sup { font-size: .68em; line-height: 0; vertical-align: baseline; position: relative; top: -.42em; }   /* ordinals: no taller line */
.course { font-weight: 500; }
.c-note, .aud { color: var(--muted); }
.lang-k { font-weight: 500; margin-right: .5em; }
@container (max-width: 33.99rem) {
  .cv-entry { grid-template-columns: minmax(0, 1fr); grid-template-areas: "when" "what"; }
  .cv-entry .when { padding-top: 0; }
  .kv div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cv-name { font-size: 2.2rem; }
}

/* ------------------------------------------- very large text on a narrow screen (a big default font in the browser): stack the band,
   let tabs, names and labels wrap. In em, so it applies only when the text is large for the
   width (below 288px at the usual 16px). */
@media screen and (max-width: 18em) {
  .site-nav li { flex: 1 1 auto; max-width: 100%; }
  .site-nav a { overflow-wrap: break-word; }
  .side-in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "pic" "name" "sub" "icons" "toc"; }
  .portrait { margin-bottom: .5rem; }
  .name { font-size: 1.35rem; }
  .side-sub a, .with-paper a { white-space: normal; }
  .doc, .mat, .materials li { max-width: 100%; }
  .doc > span, .mat > span, .cv-contact li { min-width: 0; overflow-wrap: anywhere; }
}

/* ------------------------------------------------------------------ print
   Any page prints from the browser as its main column. The CV's PDF is not a printout (it is
   typeset with LaTeX, cvtex/); printing the web CV gives a plain version of it, whole entries
   and sections kept together where they fit. The CV's running title ("Yotam Dvir, curriculum
   vitae") is in a <style> of the CV page alone (build.py, CV_PAGE). */
@page {
  size: A4;
  margin: 13mm 15mm 14mm;
  @bottom-right { content: counter(page) " of " counter(pages); font-family: "EB Garamond", serif; font-size: 9pt; color: #5b6863; }
}
@media print {
  :root, :root:not([data-theme="light"]), :root[data-theme="dark"] {
    --bg: #fff; --ink: #141b19; --muted: #4f5c57; --rule: #c9d2cf; --link: #1b5348; --brass-ink: #7a5714;
    --side-bg: #183f38;
    color-scheme: light;
  }
  html, body { background: #fff; color: var(--ink); }
  body { font-size: 10pt; }
  .skip, .cv-bar, .foot, .doc-links, html:has(main.cv) .side { display: none !important; }
  /* Of the sidebar, other pages print only the name, as a heading. */
  .site-nav, .portrait, .side-sub, .side-icons, .side-nav, .side-foot { display: none !important; }
  .side { background: none; color: var(--ink); margin-bottom: 2rem; }
  .name { font-size: 2rem; color: var(--ink); }
  .page { margin: 0; padding: 0; max-width: none; }
  main { container-type: normal; }
  /* Pages other than the CV keep their screen proportions, on a smaller rem. */
  html:not(:has(main.cv)) { font-size: 8.8pt; }
  html:not(:has(main.cv)) body { font-size: 1.25rem; }
  main:not(.cv) { max-width: 46rem; }
  main:not(.cv) > section + section { margin-top: 2.5rem; }
  .item-head, .entry, .related li, .contact li { break-inside: avoid; }
  main h2, main h1 { break-after: avoid; }
  a { color: inherit; text-decoration: none; }

  /* The CV: its section titles in a column beside the entries, dates on the right. */
  main.cv { max-width: none; font-size: 10.4pt; line-height: 1.27; }
  .cv-head {
    display: grid; grid-template-columns: 1fr auto; column-gap: 2em; align-items: end;
    padding-bottom: .7em; border-bottom: .6pt solid var(--ink);
  }
  .cv-name { font-size: 2.5em; font-weight: 500; line-height: 1; }
  .cv-sub { grid-column: 1; margin-top: .3em; font-size: 1.1em; }
  .cv-contact { grid-column: 2; grid-row: 1 / span 2; display: block; margin: 0; text-align: right; font-size: 1em; line-height: 1.35; }
  .cv-section { display: grid; grid-template-columns: 7.9em minmax(0, 1fr); column-gap: 1.1em; margin-top: 4.2mm; break-inside: avoid; }
  .cv-section h2 { font-size: 1.04em; font-weight: 500; line-height: 1.2; letter-spacing: .03em; color: var(--side-bg); margin: 0; padding-top: .02em; }
  .cv-list > li + li { margin-top: .45em; }
  .cv-entry { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "what when"; column-gap: 1.2em; break-inside: avoid; }
  .cv-entry.compact + .cv-entry.compact { margin-top: .15em; }
  .cv-entry .what { line-height: 1.27; }
  .cv-entry .when { font-size: 1em; padding-top: 0; text-align: right; white-space: nowrap; line-height: 1.3; color: var(--muted); }
  .cv .award { font-size: 1em; margin-top: 0; line-height: 1.3; }
  .kv { margin-top: .1em; font-size: 1em; gap: 0; }
  .kv div { display: block; }
  .kv dt, .kv dd { display: inline; }
  .kv dt { margin-right: .35em; letter-spacing: .03em; }
  .duties { margin-top: .05em; }
  .courses { margin-top: .3em; }
  .duties li, .courses li { padding-left: .85em; }
  .courses li + li { margin-top: .15em; }
  .duties li::before, .courses li::before { top: .58em; width: .25em; height: .25em; }
  .courses-h { margin-top: .15em; }
}

/* ------------------------------------------------------------- navigation
   The pages lie side by side in tab order. Moving to a later tab, the page drifts a little to the
   left and fades as the new one fades in from a little to the right and settles; to an earlier
   tab the other way; within one tab (the research list and an item page) it cross-fades.
   "The page" is the main column and the section rail (its own group, clipped to its box, so it
   never drifts over the sidebar's edge). The inline script in <head> names the direction as a
   view-transition type (page-next, page-prev, page-fade), or as the same class on <html> where
   types are missing. The rest of the sidebar (on narrow screens the top band) stays still while
   the brass tab marker glides along its line to the new tab, in the same time. All of it takes
   about 0.4 s and moves in whole pixels (see vt-in below).
   A link within the page (site.js) jumps rather than scrolls, through a same-document view
   transition of the main column alone: it softens (fades, blurs, moves a little in the
   direction of travel) and the target fades in from a little the other way (jump-down, jump-up).
   With reduced motion there is no transition at all. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
:root {
  /* All motion timings. A page switch: the old page fades out in --vt-page-out while it moves
     away; the new page starts at --vt-page-in-at and has moved in and faded in by
     --vt-page-in-at + --vt-page-in. An in-page jump the same, with the --vt-jump-* times. */
  --vt-page-out: .18s;
  --vt-page-in-at: .04s;
  --vt-page-in: .36s;
  --vt-jump-out: .14s;
  --vt-jump-in-at: .03s;
  --vt-jump-in: .27s;
  --vt-leave: .12s;     /* WebKit (live, below): the old page fades out, then the browser navigates */
  --vt-tick: .2s;       /* the rail's marker following the scroll */
  /* A decisive ease-out (quadratic): no long creep at the end. The tab marker, the rail's box and
     the rail's marker glide on it; the moves of the page (vt-in, vt-out) follow the same curve. */
  --vt-ease: cubic-bezier(.5, 1, .89, 1);
}
html {
  --vt-out: var(--vt-page-out); --vt-in-at: var(--vt-page-in-at); --vt-in: var(--vt-page-in);
  --vt-x: 0px; --vt-y: 0px;   /* direction of travel, one pixel (none: a cross-fade) */
}
html:is(:active-view-transition-type(page-next), .page-next) { --vt-x: -1px; }
html:is(:active-view-transition-type(page-prev), .page-prev) { --vt-x: 1px; }
html:is(:active-view-transition-type(jump-down, jump-up), .jump-down, .jump-up) {
  --vt-out: var(--vt-jump-out); --vt-in-at: var(--vt-jump-in-at); --vt-in: var(--vt-jump-in);
}
html:is(:active-view-transition-type(jump-down), .jump-down) { --vt-y: -1px; }
html:is(:active-view-transition-type(jump-up), .jump-up) { --vt-y: 1px; }
@media screen {
  .side { view-transition-name: sidebar; }
  .side-nav { view-transition-name: rail; }
  .tab-mark { view-transition-name: tab-mark; }
}
::view-transition-group(sidebar), ::view-transition-new(sidebar) { animation: none; }
::view-transition-old(sidebar) { display: none; }
::view-transition-group(tab-mark), ::view-transition-group(rail) {
  animation-duration: calc(var(--vt-in-at) + var(--vt-in)); animation-timing-function: var(--vt-ease);
}
@media (max-width: 59.99rem) { ::view-transition-group(rail) { animation: none; } }   /* in the band: no flight from a scrolled position */
::view-transition-image-pair(root), ::view-transition-image-pair(rail) { isolation: auto; overflow: clip; }
::view-transition-old(root), ::view-transition-old(rail) {
  mix-blend-mode: normal; animation: vt-fade-out var(--vt-out) ease-in both, vt-out var(--vt-in) linear both;
}
::view-transition-new(root), ::view-transition-new(rail) {
  mix-blend-mode: normal; animation: vt-fade-in var(--vt-in) ease-out var(--vt-in-at) both, vt-in var(--vt-in) linear var(--vt-in-at) both;
}

/* In-page jumps: the main column softens as it leaves and sharpens as it arrives; the rail is
   still while site.js glides its marker to the new section, in the same time. */
html:is(:active-view-transition-type(jump-down, jump-up), .jump-down, .jump-up)::view-transition-group(rail),
html:is(:active-view-transition-type(jump-down, jump-up), .jump-down, .jump-up)::view-transition-new(rail) { animation: none; }
html:is(:active-view-transition-type(jump-down, jump-up), .jump-down, .jump-up)::view-transition-old(rail) { display: none; }
html:is(:active-view-transition-type(jump-down, jump-up), .jump-down, .jump-up)::view-transition-old(root) {
  animation: vt-soften var(--vt-out) ease-in both, vt-out var(--vt-in) linear both;
}
html:is(:active-view-transition-type(jump-down, jump-up), .jump-down, .jump-up)::view-transition-new(root) {
  animation: vt-sharpen var(--vt-in) ease-out var(--vt-in-at) both, vt-in var(--vt-in) linear var(--vt-in-at) both;
}

@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-fade-in { from { opacity: 0; } }
@keyframes vt-soften { to { opacity: 0; filter: blur(3px); } }
@keyframes vt-sharpen { from { opacity: 0; filter: blur(3px); } 60%, to { filter: blur(0); } }   /* sharp well before the end */
/* The moves: 24px along (--vt-x, --vt-y) on the --vt-ease curve, remaining = 24px * (1 - t)^2,
   but in whole pixels (steps), each pixel taken where the curve crosses its half. A snapshot drawn
   a fraction of a pixel off is resampled, and its text flickers by a pixel on the first and last
   frames against the live page; on whole pixels every frame is the page itself, moved. */
@keyframes vt-in {
  0%     { translate: calc(-24 * var(--vt-x)) calc(-24 * var(--vt-y)); animation-timing-function: steps(12); }
  27.8%  { translate: calc(-12 * var(--vt-x)) calc(-12 * var(--vt-y)); animation-timing-function: steps(6); }
  48%    { translate: calc(-6 * var(--vt-x)) calc(-6 * var(--vt-y)); animation-timing-function: steps(3); }
  61.8%  { translate: calc(-3 * var(--vt-x)) calc(-3 * var(--vt-y)); animation-timing-function: steps(2); }
  75%    { translate: calc(-1 * var(--vt-x)) calc(-1 * var(--vt-y)); animation-timing-function: steps(1); }
  85.6%, to { translate: 0 0; }
}
@keyframes vt-out {
  0%     { translate: 0 0; animation-timing-function: steps(12); }
  27.8%  { translate: calc(12 * var(--vt-x)) calc(12 * var(--vt-y)); animation-timing-function: steps(6); }
  48%    { translate: calc(18 * var(--vt-x)) calc(18 * var(--vt-y)); animation-timing-function: steps(3); }
  61.8%  { translate: calc(21 * var(--vt-x)) calc(21 * var(--vt-y)); animation-timing-function: steps(2); }
  75%    { translate: calc(23 * var(--vt-x)) calc(23 * var(--vt-y)); animation-timing-function: steps(1); }
  85.6%, to { translate: calc(24 * var(--vt-x)) calc(24 * var(--vt-y)); }
}

/* WebKit (class "live" on <html>, set by the inline script in <head>; ?motion=live anywhere): the
   view transition is skipped, because WebKit's snapshot of the text differs by a pixel from the
   live text, and the live main column and rail move instead, with the same keyframes and timings.
   Leaving (live-out), they fade out and start to move for --vt-leave, then the browser navigates;
   arriving (live-in), they start off to the side and transparent and move and fade in; an in-page
   jump does the same around the scroll (site.js), the column alone. The tab marker glides from
   the old tab (live-tab: --tab-dx, --tab-sx, measured by the old page). The moved boxes stay
   composited at rest too, so their text is drawn the same way before, during and after the move.
   The column and the sidebar (the band) clip what moves past their edges, at rest too, so nothing
   changes when a move starts or ends: no scrollbar appears, and the page never grows. At rest
   nothing reaches those edges (the padding is wider than the move). */
html.live .page > *, html.live .side-nav > * { will-change: transform, translate, opacity; }
html.live .tab-mark { will-change: transform; }
html.live .page { overflow: clip; }
html.live .side { overflow-x: clip; }
html.live.live-out:not(.jump-down, .jump-up) { --vt-out: var(--vt-leave); }
html.live.live-in { --vt-in-at: 0s; }   /* the old page is gone already: nothing to cross-fade with */
html.live.live-out .page > *, html.live.live-out:not(.jump-down, .jump-up) .side-nav > * {
  animation: vt-fade-out var(--vt-out) ease-in both, vt-out var(--vt-in) linear both;
}
html.live.live-in .page > *, html.live.live-in:not(.jump-down, .jump-up) .side-nav > * {
  animation: vt-fade-in var(--vt-in) ease-out var(--vt-in-at) both, vt-in var(--vt-in) linear var(--vt-in-at) both;
}
html.live.live-out:is(.jump-down, .jump-up) .page > * { animation: vt-soften var(--vt-out) ease-in both, vt-out var(--vt-in) linear both; }
html.live.live-in:is(.jump-down, .jump-up) .page > * { animation: vt-sharpen var(--vt-in) ease-out var(--vt-in-at) both, vt-in var(--vt-in) linear var(--vt-in-at) both; }
html.live.live-tab .tab-mark { transform-origin: 0 0; animation: live-tab var(--vt-in) var(--vt-ease) both; }
@keyframes live-tab { from { transform: translateX(var(--tab-dx)) scaleX(var(--tab-sx)); } }

/* The rail's marker (site.js): one brass segment over the current link's left border, which glides
   to the next current section. Without JavaScript there is no marker and no section is marked. */
.side-nav a { position: relative; }
.rail-mark { position: absolute; left: -2px; top: 0; bottom: 0; width: 2px; transform-origin: 0 0; background: var(--brass); pointer-events: none; }
.side-nav.marked a[aria-current] { border-left-color: transparent; }   /* the marker draws it */
@media screen and (max-width: 59.99rem) { .side-nav.marked a[aria-current] { border-left-color: var(--side-rule); } }
@media (prefers-reduced-motion: no-preference) {
  .rail-mark { transition: transform var(--vt-tick) var(--vt-ease); }
  .rail-mark.jump { transition-duration: calc(var(--vt-jump-in-at) + var(--vt-jump-in)); }
  .rail-mark.still { transition: none; }
}

/* The target of an in-page jump takes focus (for keyboard and screen-reader users) without a ring. */
.page [tabindex="-1"]:focus { outline: none; }