/* rifaki.me — one narrow column of small sans type, the page menu on the
   right, links in classic hyperlink blue. No webfonts, no scripts. */

:root { color-scheme: light; }
* { box-sizing: border-box; }

body {
  margin: 0;
  background: #fff;
  color: #333;
  font: 14px/1.55 "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-wrap: break-word;
}

img, video, iframe { max-width: 100%; }
img { height: auto; }

a { color: #0864c7; text-decoration: underline; text-underline-offset: 2px; }

.frame {
  display: flex;
  flex-direction: column;
  padding: 26px 18px 56px;
  max-width: 560px;
  margin: 0 auto;
}
nav.menu { order: -1; margin-bottom: 30px; }

@media (min-width: 760px) {
  .frame {
    display: block;
    position: relative;
    max-width: none;
    padding: 34px 220px 88px 120px;
    padding: 34px 220px 88px clamp(48px, 16vw, 200px);
  }
  main { width: 500px; max-width: 100%; }
  nav.menu {
    order: 0;
    position: absolute;
    top: 34px;
    right: 56px;
    text-align: right;
    margin: 0;
  }
}

nav.menu ul { list-style: none; margin: 0; padding: 0; }
nav.menu li { margin: 0 0 4px; }
nav.menu li:last-child { margin-bottom: 0; }
nav.menu ul.group { margin-top: 4px; }

h1 {
  margin: 0 0 14px;
  font-size: 21px;
  font-weight: 700;
  color: #111;
  letter-spacing: -0.01em;
}
h1 a, h1 a:hover { color: inherit; text-decoration: none; }

h2 {
  margin: 2em 0 8px;
  font-size: 15px;
  font-weight: 700;
  color: #111;
}

p, ul, ol { margin: 0 0 14px; }
main :last-child { margin-bottom: 0; }

.note, .byline { font-size: 11px; color: #999; }

/* dated lists: news on the front page */
ul.dated { list-style: none; padding: 0; margin: 0; }
ul.dated li { margin: 0 0 0.7em; }
ul.dated .when {
  display: inline-block;
  min-width: 108px;
  color: #999;
  font-variant-numeric: tabular-nums;
}
ul.dated em { font-style: normal; color: #111; }

/* notes index */
.topnav { margin: 0 0 26px; }
ul.post-list { list-style: none; margin: 0; padding: 0; }
ul.post-list li { margin: 0 0 0.7em; }
ul.post-list .post-date {
  display: inline-block;
  min-width: 138px;
  color: #999;
  font-variant-numeric: tabular-nums;
}

/* research index */
ol.pubs-list { list-style: none; margin: 0; padding: 0; }
ol.pubs-list > li { margin: 0 0 24px; }
.pub-title { margin: 0 0 2px; font-weight: 700; color: #111; }
.pub-meta { margin: 0 0 6px; font-size: 12px; color: #888; }
.pub-meta .sep { margin: 0 6px; }
.pub-meta .status { color: #888; }
.pub-abstract { margin: 0; }
.section-empty { color: #888; }

/* note articles */
article h1 { font-size: 20px; margin: 0 0 4px; }
article .byline { margin: 0 0 22px; }
article h2 { margin: 2.2em 0 8px; }
article figure { margin: 22px 0; }
article figure img { max-width: 100%; height: auto; display: block; }
article figcaption { margin-top: 8px; font-size: 11.5px; line-height: 1.5; color: #888; }
article blockquote { margin: 18px 0; padding-left: 14px; border-left: 2px solid #ddd; color: #555; }
.tweet-embed { display: flex; justify-content: center; }
ul.refs, ul.further { list-style: none; margin: 10px 0 0; padding: 0; font-size: 12.5px; line-height: 1.6; color: #555; }
ul.refs li, ul.further li { margin: 0 0 6px; }
.series-nav { display: flex; justify-content: space-between; gap: 16px; margin-top: 34px; padding-top: 12px; border-top: 1px solid #eee; font-size: 12.5px; }

/* the name above the menu, plain weight */
.site-title { display: block;  font-size: 14px; font-weight: 400; margin: 0 0 4px; color: #111; }

/* the about portrait */
img.about-photo { width: 160px; height: auto; display: block; margin: 0 0 20px; }

.site-title a, .site-title a:hover, .site-title a:focus { color: #111; text-decoration: none; }

/* the address lives here, not in the markup: unclickable, and a
   scraper reading the HTML finds nothing to harvest */
.e::after { content: "mouhssine\0040 rifaki.me"; }