:root{
  --paper:#fbfaf7;
  --paper-2:#f4f2ec;
  --ink:#16130f;
  --ink-2:#6c655e;
  --ink-3:#9c958b;
  --rule:#e4dfd6;
  --navy:#1c3557;
  --navy-soft:#eaeef4;
  --ox:#7d2027;
  --ox-soft:#f4ebe8;

  --measure:37rem;
  --col:41rem;
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:3rem; --s6:4.5rem;

  --serif:"Source Serif 4","Iowan Old Style",Georgia,"Times New Roman",serif;
  --sans:"Source Sans 3","Helvetica Neue",Arial,sans-serif;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#131211; --paper-2:#1c1a17; --ink:#e9e4dc; --ink-2:#a09890; --ink-3:#7a736b;
    --rule:#2d2a26; --navy:#8fb3dd; --navy-soft:#1a2130; --ox:#dd9a94; --ox-soft:#251b1a;
  }
}
:root[data-theme="dark"]{
  --paper:#131211; --paper-2:#1c1a17; --ink:#e9e4dc; --ink-2:#a09890; --ink-3:#7a736b;
  --rule:#2d2a26; --navy:#8fb3dd; --navy-soft:#1a2130; --ox:#dd9a94; --ox-soft:#251b1a;
}

/* base */

html{scroll-behavior:smooth}
*{box-sizing:border-box}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:19px;
  line-height:1.62;
  margin:0;
  padding:var(--s5) var(--s3) var(--s6);
  -webkit-font-smoothing:antialiased;
}

.page{max-width:var(--col);margin:0 auto}

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

/* nav */

.nav{
  display:flex;justify-content:flex-end;gap:1rem;margin:0 0 var(--s3);
  font-family:var(--sans);font-size:.74rem;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;
}
.nav a{text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--ox) 30%,transparent);padding-bottom:1px}
.nav a:hover{border-bottom-color:var(--ox)}

/* masthead */

.head{margin-bottom:var(--s4)}

.photo{position:relative;width:172px;height:172px;margin:0 0 var(--s3)}
.photo img{
  width:100%;height:100%;object-fit:cover;border-radius:2px;display:block;
  position:relative;z-index:1;filter:saturate(.94);
}
.photo::after{
  content:"";position:absolute;inset:0;border:1px solid var(--navy);border-radius:2px;
  transform:translate(7px,7px);z-index:0;opacity:.5;transition:transform .22s ease;
}
.photo:hover::after{transform:translate(3px,3px)}

@media(min-width:40rem){
  .photo{width:208px;height:208px;float:right;margin:.4rem 0 var(--s3) var(--s4)}
}

h1{
  font-family:var(--serif);font-size:2.1rem;font-weight:600;
  letter-spacing:-.022em;line-height:1.08;margin:0 0 .15rem;
  color:var(--navy);text-wrap:balance;overflow-wrap:anywhere;
}
h1 a{
  color:inherit;text-decoration:none;
  border-bottom:1px dotted color-mix(in srgb,var(--navy) 45%,transparent);
}
h1 a:hover{border-bottom-color:var(--navy)}
h1 a:focus-visible{outline:2px solid var(--navy);outline-offset:3px;border-radius:2px}

.profiles{
  font-family:var(--sans);font-size:.72rem;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  display:flex;flex-wrap:wrap;gap:.75rem;margin:0;
}
.profiles a,.copybtn{
  color:var(--ox);text-decoration:none;
  border-bottom:1px solid color-mix(in srgb,var(--ox) 30%,transparent);padding-bottom:1px;
}
.profiles a:hover,.copybtn:hover{border-bottom-color:var(--ox)}
.copybtn{appearance:none;background:none;border-width:0 0 1px;padding:0 0 1px;font:inherit;cursor:pointer}
.copybtn:focus-visible{outline:2px solid var(--ox);outline-offset:2px}

.greet{font-size:1.15rem;color:var(--ink);margin:var(--s3) 0 0}

.bio{font-size:1rem;line-height:1.62;text-align:justify;hyphens:auto;margin:0 0 var(--s2);max-width:var(--measure)}

/* sections */

.rule{border:0;border-top:1px solid var(--rule);margin:var(--s4) 0;clear:both}

.seclabel{
  font-family:var(--sans);font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--navy);
  margin:0 0 var(--s3);display:flex;align-items:center;gap:.6rem;
}
.seclabel::after{content:"";flex:1;height:1px;background:var(--rule)}

/* papers */

.paper{margin-bottom:var(--s4)}
.paper:last-child{margin-bottom:0}
.paper h3{font-family:var(--serif);font-size:1.05rem;font-weight:600;line-height:1.32;margin:0 0 .2rem;letter-spacing:-.006em}
.paper .meta{font-size:.9rem;color:var(--ink-2);margin:0 0 .1rem}
.paper .venue{font-size:.9rem;color:var(--ink-2);margin:0 0 .55rem}
.paper .venue em{color:var(--ink);font-weight:600;font-style:italic}

details.abstract{margin:0 0 .5rem}
details.abstract > summary{
  font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ox);cursor:pointer;list-style:none;
  display:inline-flex;align-items:center;gap:.38rem;padding:.1rem 0;
}
details.abstract > summary::-webkit-details-marker{display:none}
details.abstract > summary::before{
  content:"";width:0;height:0;border-left:4px solid currentColor;
  border-top:3.2px solid transparent;border-bottom:3.2px solid transparent;
  transition:transform .16s ease;flex:none;
}
details.abstract[open] > summary::before{transform:rotate(90deg)}
details.abstract > summary:focus-visible{outline:2px solid var(--ox);outline-offset:3px;border-radius:2px}

.abstract-body{
  border-left:2px solid var(--navy);padding:.1rem 0 .1rem var(--s2);margin:.55rem 0 0;
  font-size:.9rem;line-height:1.6;color:var(--ink-2);text-align:justify;hyphens:auto;
}
.abstract-body p{margin:0}

.paper-links{
  font-family:var(--sans);font-size:.71rem;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;display:flex;flex-wrap:wrap;gap:.8rem;
}
.paper-links a{text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--ox) 30%,transparent);padding-bottom:1px}
.paper-links a:hover{border-bottom-color:var(--ox)}

.wip{font-size:.96rem;margin:0 0 .45rem;color:var(--ink)}
.wip span{color:var(--ink-2)}

/* author footnote */

.footnote{margin-top:var(--s5);clear:both}
.footnote::before{content:"";display:block;width:10rem;height:1px;background:var(--rule);margin-bottom:var(--s2)}
.footnote p{
  font-size:.8rem;line-height:1.6;color:var(--ink-2);margin:0;max-width:30rem;
  text-indent:-.85rem;padding-left:.85rem;
}
.fn-mark{color:var(--navy);font-weight:600}
.fn-name{font-variant:small-caps;letter-spacing:.04em;color:var(--ink);font-weight:600}
.footnote em{color:var(--ink);font-style:italic}
.smiley{font-family:var(--sans);color:var(--navy);letter-spacing:-.02em}
.footnote:target p{background:var(--navy-soft);box-shadow:0 0 0 .4rem var(--navy-soft);border-radius:1px}

/* teaching */

.subtitle{font-family:var(--sans);font-size:.88rem;color:var(--ink-2);margin:0 0 var(--s4);line-height:1.5}
.course{margin-bottom:var(--s3)}
.course h3{font-family:var(--serif);font-size:1rem;font-weight:600;margin:0 0 .12rem}
.course .when{font-family:var(--sans);font-size:.78rem;color:var(--ink-3);margin:0 0 .3rem;letter-spacing:.02em}
.course p:last-child{font-size:.9rem;color:var(--ink-2);margin:0}

/* privacy policy */

.pp-meta{font-family:var(--sans);font-size:.8rem;color:var(--ink-2);margin:0 0 var(--s4);line-height:1.7}
.pp-meta b{color:var(--ink);font-weight:600}
.policy h3{font-family:var(--serif);font-size:1rem;font-weight:600;margin:var(--s3) 0 .35rem}
.policy p{font-size:.95rem;line-height:1.6;margin:0 0 var(--s2);max-width:var(--measure)}
.pp-item{margin:0 0 var(--s2)}
.pp-item .name{font-family:var(--serif);font-size:.95rem;font-weight:600;margin:0 0 .15rem}
.pp-item .line{font-size:.88rem;line-height:1.55;color:var(--ink-2);margin:0 0 .1rem;padding-left:1rem;text-indent:-1rem}
.pp-item .line span{
  font-family:var(--sans);font-size:.68rem;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--navy);margin-right:.4rem;
}
.pp-list{font-size:.9rem;line-height:1.75;color:var(--ink-2);margin:0 0 var(--s2);padding-left:1.1rem}
.pp-list li::marker{color:var(--ink-3)}
.pp-cols{columns:2;column-gap:var(--s4)}
@media(max-width:34rem){.pp-cols{columns:1}}
.pp-steps{font-size:.9rem;line-height:1.7;color:var(--ink-2);margin:0 0 var(--s2);padding-left:1.3rem}

/* footer */

.foot{
  border-top:1px solid var(--rule);margin-top:var(--s6);padding-top:var(--s3);
  font-family:var(--sans);font-size:.76rem;color:var(--ink-3);clear:both;
}
.foot a{color:var(--ink-3);text-decoration-color:color-mix(in srgb,var(--ink-3) 40%,transparent)}
.foot a:hover{color:var(--ox);text-decoration-color:var(--ox)}

/* toast */

.toast{
  position:fixed;bottom:1.2rem;left:50%;max-width:calc(100vw - 2rem);text-align:center;
  transform:translateX(-50%) translateY(1rem);
  background:var(--navy);color:#fff;font-family:var(--sans);font-size:.78rem;font-weight:600;
  letter-spacing:.04em;padding:.5rem .9rem;border-radius:3px;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:50;
}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

/* responsive */

@media(max-width:40rem){
  .bio,.abstract-body{text-align:left;hyphens:none}
}
@media(max-width:32rem){
  body{font-size:17px;padding:var(--s4) var(--s2) var(--s5)}
  h1{font-size:1.8rem}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important;animation:none !important}
}
